Issue with Angular Forms : AbstractControl vs FormControl

user_1813971 0
Viewed 5201

When I am trying to use a form with controls I am getting this error.

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

Form Code

  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"      
>
angular-forms angular typescript
2 Answers

When you create reactive forms, you're supposed to use the form itself, not the controls of it.

if you just use the controls, separately, then what's the point of having a form ? 

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

This works for me. i.e. $any()

  <ion-checkbox
      
        [formControl]="$any(fc)"
      
        (ionChange)="changeCheckbox()"
      >
user_10773090
Related