средство проверки реактивной формы не будет работать в Angular

Question

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

HTML

(это не сработает)

<form [formGroup]="creditCardForm">
      <input type="text" pInputText formControlName="cardHolderName" required maxlength #cardHolderName/>
            <label *ngIf="form.cardHolderName.invalid &&
            (form.cardHolderName.dirty || form.cardHolderName.touched)" class="invalidField">Cardholder name is required</label>
</form>

TS

form = this.buildCreditCardForm(this.fb).controls;
.
.
buildCreditCardForm(fb: FormBuilder): FormGroup {
   return fb.group({
      cardHolderName: ['', [Validators.required, Validators.maxLength(50)]],
    .
    .
}

HTML (это работает, но слишком долго, чтобы грязно)

<form [formGroup]="creditCardForm">
<input type="text" pInputText formControlName="cardHolderName" required maxlength #cardHolderName/>
        <label *ngIf="fcreditCardForm.controls.cardHolderName.invalid &&
        (creditCardForm.controls.cardHolderName.dirty || creditCardForm.controls.cardHolderName.touched)" class="invalidField">Cardholder
          name is required</label>
</form>

Answer 1

вы смешиваете как реактивные валидаторы, так и валидаторы шаблонов.не знаю, почему вы все усложняете, реактивные формы просты.

Bulit You Демо с вашей формой:

HTML:

<form [formGroup]="creditCardForm">
    <input type="text" formControlName="cardHolderName"/>
    <label *ngIf="creditCardForm.get('cardHolderName').invalid">Cardholder name is required</label>
</form>

Компонент:

  creditCardForm;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.creditCardForm = new FormGroup({
      'cardHolderName': new FormControl(null, [Validators.required, Validators.maxLength(5)])
    });
  }

Удалите его и настройте под свои нужды.