양식 유효성 검사기가 각도 2로 전달되지 않음

양식 작성기를 통해 양식 유효성 검사기를 사용하여 각도 2로 양식을 만듭니다.양식 유효성 검사기가 각도 2로 전달되지 않음

텍스트 상자에 데이터를 입력 할 때마다 (div 윤곽선의 색상이 녹색으로 바뀝니다.) 전달됩니다.

데이터로 양식을로드하면 입력란에 텍스트가 채워져 있어도 텍스트 상자에 빨간색 외곽선이 표시됩니다.

HTML : 왜 유효성 검사가 통과되지

@Input() profile: Profile; 

public form: FormGroup; 
public firstname: AbstractControl; 
public lastname: AbstractControl; 


    constructor(fb: FormBuilder) { 
    this.form = fb.group({ 
     'firstname': ['', Validators.compose([Validators.required, Validators.minLength(4)])], 
     'lastname': ['', Validators.compose([Validators.required, Validators.minLength(4)])], 
     'jobtitle': ['', Validators.compose([Validators.required, Validators.minLength(4)])], 
     'department': ['', Validators.compose([Validators.required, Validators.minLength(4)])] 
    }); 

    this.firstname = this.form.controls['firstname']; 
    this.lastname = this.form.controls['lastname']; 
    this.jobtitle = this.form.controls['jobtitle']; 
    this.department = this.form.controls['department']; 
}

, Validators.required가 정확하지 : 구성 요소 파일에서

<div class="form-group row" [ngClass]="{'has-error': (!firstname.valid), 'has-success': (firstname.valid)}"> 
     <label for="firstname" class="col-sm-2 control-label">First Name</label> 
     <div class="col-sm-10"> 
      <input [formControl]="firstname" type="text" class="form-control" id="firstname" placeholder="First Name" value="{{profile.firstname}}"> 
     </div> 
    </div>

감사합니다.

출처

2016-07-16 thegunner

코드가 좋은 것, 당신이 pulnker에 문제를 재현 할 수? –

그걸 얻기 위해 시간이 좀 걸립니다. "has-error"클래스가 일찍 설정되었습니다. class = "form-group 행에 오류가 있습니다" – thegunner

그러면 솔루션을 얻을 수 있습니까? –

나는 모델 기반 방법을 사용하여 초기 값을 설정하지 않는 이유는, 모델 기반 양식을 사용하는 것을 볼 수 :

'firstname': [profile.firstname, Validators.compose([Validators.required, Validators.minLength(4)])]

당신은 데이터 손 초기화 단계에서 정말이없는 경우 약간의 시간 사용에 나중에 업데이트해야합니다

this.firstname.updateValue(this.profile.firstname);

근무 plnkr : http://plnkr.co/edit/UgsYOu04H0Y4kxGYwhAl?p=preview

출처

2016-07-17 01:34:04

양식 유효성 검사기가 각도 2로 전달되지 않음

답변

관련 문제