Angular 4: 超过 6 个字符的错误消息应该消失

Question

我正在做一个表格。如果密码字段少于 6 个字符，它应该显示一条错误消息，如果它 >= 6 个字符，则不应该。

我在适当的条件下收到错误消息，但是当我在字段中键入 6 个字符时，该消息并没有消失。

我希望此错误消息像在 'required' 条件下那样动态显示和消失。

我该怎么做？

这是模板：

<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 文件：

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>

表示密码没有错误时显示错误。去掉感叹号，改成：

<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>

Angular 4: 超过 6 个字符的错误消息应该消失

Angular 4: error message should disappear above 6 characters

angular

angular-forms