각 4 : 오류 메시지가 6 자 이상으로 사라집니다.

Question

양식을 작성 중입니다. 암호 필드가 6 자 미만이면 오류 메시지가 표시되고 6 자 이상인 경우 암호 필드는 표시되지 않아야합니다.

적절한 조건으로 오류 메시지가 표시되지만 입력란에 6자를 입력해도 메시지가 사라지지 않습니다.

이 오류 메시지가 '필수'조건과 같이 동적으로 나타나고 사라지길 바랍니다.

어떻게해야합니까?

signUpForm: FormGroup; 

ngOnInit(){ 
    this.signUpForm = new FormGroup({ 
    'email': new FormControl(null, [Validators.required, Validators.email, Validators.minLength(6)]), 
    'password':new FormControl(null, Validators.required) 
    }); 
} 

Answer 1

이 행 :

<p class="help-block" *ngIf="!signUpForm.get('password').hasError('minlength')">Password must be at list 6 characters</p> 

암호가없는 경우 오류를 표시한다는 것을 의미

다음

<div class="form-group"> 
    <label for="password">Password</label> 
    <input 
    type="text" 
    name="password" 
    id="password" 
    class="form-control" 
    formControlName="password"> 
    <div *ngIf="signUpForm.get('password').touched"> 
    <p class="help-block" 
     *ngIf="!signUpForm.get('password').valid">This field is required</p> 
    <p class="help-block" 
     *ngIf="!signUpForm.get('password').hasError('minlength')">Password must be at list 6 characters</p> 
    </div> 
</div> 

는 TS 파일입니다 : 여기

템플릿입니다 오류. 느낌표를 제거하고로 변경 : 암호가 먼저 폼 초기화 유효성 검사를 추가하기위한

<p class="help-block" *ngIf="signUpForm.get('password').hasError('minlength')">Password must be at list 6 characters</p> 

Answer 2

this.signUpForm = new FormGroup({ 
      'email': new FormControl(null, [Validators.required, Validators.email, Validators.minLength(6)]), 
      'password':new FormControl(null, [Validators.required, Validators.minLength(6)]) 
     }); 

이제 HTML 코드

<p class="help-block" *ngIf="signUpForm.get('password').hasError('minlength') && !signUpForm.get('password').hasError('required')">Password must be at list 6 characters</p> 

Answer 3

확인을 일부 변경, 생각 감사합니다. 대답 해 주셔서 감사합니다.

<input 
     type="text" 
     name="password" 
     id="password" 
     class="form-control" 
     formControlName="password" 
     > 
      <div class="help-block" 
      *ngIf="signUpForm.get('password').touched"> 
       <p 
        *ngIf="signUpForm.get('password').hasError('required'); else characterNumber">This field is required</p> 
         <ng-template #characterNumber> 
         <p  
         *ngIf="signUpForm.get('password').hasError('minlength')">Password must be at list 6 characters</p> 
         </ng-template>  
      </div>