Проблема с угловыми формами: AbstractControl против FormControl

Question

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

 Type 'AbstractControl' is missing the following properties from type 
'FormControl': registerOnChange, registerOnDisabledChange, _applyFormState

Код формы

  this.checkoutForm = this.fb.group({
      firstName: ['', [Validators.required, Validators.pattern('[a-zA-Z][a-zA-Z ]+[a-zA-Z]$')]],
      lastName: ['', [Validators.required, Validators.pattern('[a-zA-Z][a-zA-Z ]+[a-zA-Z]$')]],
      phoneNumber: ['', [Validators.required, Validators.pattern('[0-9]+')]],
      address: ['', [Validators.required, Validators.maxLength(100)]],
      pinCode: ['', Validators.required]
    });

html

<input type="text" 
name="firstName"
[formControl]="checkoutForm.controls['firstName']" 
value="" 
placeholder="" 
autocomplete="off"      
>

Answer 1

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

если вы просто используете элементы управления по отдельности, то какой смысл иметь форму?

<form [formGroup]="checkoutForm">
  <input type="text" formControlName="firstName">
</form>