Угловая ошибка 5 валидаторов реактивных форм

Question

Я застрял в этой глупой угловой ошибке 5 реактивных форм, от которой я не могу избавиться.При добавлении блока сообщения проверки в html я получаю сообщение об ошибке

"Невозможно прочитать свойство 'invalid' of undefined"

, что странно, поскольку существует формаэлемент управления с тем же именем, и я могу получить доступ к значению этого поля.Ниже приведен код

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 code

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(), вы не должны сталкиваться с этой проблемой.

Если вы инициализируете форму любым другим вашим собственным методом, тогда вы можете использовать что-то вроде:

Использоватьоператор безопасной навигации ?.Это проверяет, приводит ли первый оператор к истине или нет.Когда представление отображается, возможно, элемент управления еще не инициализирован.Поэтому предположим, что если переменная компонента password не определена при визуализации вашего представления, и вы пытаетесь получить доступ к свойству invalid из password (которое не определено), вы получите ошибку, полученную сейчас ..

например:

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