Angular 5反應形式驗證器錯誤

Question

我一直被困在這個愚蠢的5角反應形式錯誤，我無法擺脫。 在html中添加驗證消息塊時，出現錯誤

“無法讀取未定義的屬性'invalid'”

這很奇怪，因為存在一個具有相同名稱的表單控件元素，並且我能夠訪問該字段的值。 下面是代碼

HTML文件

 <form [formGroup]='signUpForm'>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <label>Password</label>
          <input type="password" class="form-control" formControlName='password'>
          <div *ngIf="password.invalid && (password.dirty || password.touched)"
 class="alert alert-danger">
          <div *ngIf="password.errors.required">
            Name is required.
          </div>
          </div>
        </div>
      </div>
    </div>
  </form>

ts代碼

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

請幫忙。 提前致謝

Answer 1

嘗試此代碼。

  <div *ngIf="signUpForm.controls['password'].invalid && (signUpForm.controls['password'].dirty || signUpForm.controls['password'].touched)"
class="alert alert-danger">

    <div *ngIf="signUpForm.get('password').hasError('required')">
       Name is required.
    </div>
</div>

Answer 2

您在哪里初始化表格？ 如果在ngOnInit()執行此操作，則ngOnInit()該問題。

如果要使用自己的任何其他自定義方法來初始化表單，則可以使用類似以下內容的方法：

使用安全的導航操作員? 。 這將檢查第一個運算符的結果是否為true。 呈現視圖時，控件可能尚未初始化。 因此，假設如果在渲染視圖時未定義組件變量password並且嘗試訪問password invalid的屬性（未定義），那么您將得到現在得到的錯誤。

例如：

 <div *ngIf="password?.invalid && (password?.dirty || password?.touched)" class="alert alert-danger">

因此，您的實際視圖可能類似於：

 <form [formGroup]='signUpForm'>
<div class="row">
  <div class="col-md-12">
    <div class="form-group">
      <label>Password</label>
      <input type="password" class="form-control" formControlName='password'>
      <div *ngIf="password?.invalid && (password?.dirty || password?.touched)" class="alert alert-danger">
      <div *ngIf="password?.errors?.required">
        Name is required.
      </div>
      </div>
    </div>
  </div>
</div>