Как показать сообщения об ошибках проверки реактивных форм

Question

ребята,

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

Не могли бы вы помочь мне найти проблему?

Спасибо за совет.

Мой HTML-код:

  <form [formGroup]="formAlta" (ngSubmit)="addRepresentacio()">
            <div class="form-group">
              <label for="namePro">Nom</label>
              <input id="namePro" class="form-control" formControlName="namePro" placeholder="Nom del professional" required>
              <div *ngIf="namePro.invalid && (namePro.dirty || namePro.touched)" class="alert alert-danger form-danger" role="alert">

        <div *ngIf="namePro.errors.required">
            El Nom del professional es obligatori
        </div>
    </div></form>

И мой компонент TS

 formAlta: FormGroup;
 ngOnInit() {
    this.formAlta = new FormGroup({
      idPro: new FormControl(),
      documentTypePro: new FormControl(),
      namePro: new FormControl('',[Validators.required]),
      rProfessional: new FormControl(this.tipusPro),
      firstSurnamePro: new FormControl(),
      secondSurnamePro: new FormControl(),
      businessNamePro: new FormControl(),
      idCli: new FormControl(),
      documentTypeCli: new FormControl(),
      nameCli: new FormControl('',Validators.required),
      rClient: new FormControl(this.tipusCli),
      firstSurnameCli: new FormControl(),
      secondSurnameCli: new FormControl(),
      businessNameCli: new FormControl(),
      idPermis: new FormArray([]),
      dateFiPermis: new FormArray([])
    });
  }

Answer 1

Я думаю, вы должны изменить свой код на что-то подобное

  <form [formGroup]="formAlta" (ngSubmit)="addRepresentacio()">
        <div class="form-group">
          <label for="namePro">Nom</label>
          <input id="namePro" class="form-control" formControlName="namePro" placeholder="Nom del professional" required>
          <div *ngIf="formAlta.controls['namePro'].invalid && (formAlta.controls['namePro'].dirty || formAlta.controls['namePro'].touched)" class="alert alert-danger form-danger" role="alert">

    <div *ngIf="formAlta.controls['namePro'].errors.required">
        El Nom del professional es obligatori
    </div>
</div></form>

Answer 2

Вы должны создать метод получения в ваших component.ts следующим образом, чтобы получить элемент управления формы в шаблоне

get formAltaControls(): any {
   return this.formAlta['controls'];
}

В вашем componenten.html

<div *ngIf="formAltaControls.namePro.invalid && (formAltaControls.namePro.dirty || formAltaControls.namePro.touched)" class="alert alert-danger form-danger" role="alert">

    <div *ngIf="formAltaControls.namePro.errors.required">
        El Nom del professional es obligatori
    </div>