CODEWITHSUNDEEP
angulartypescriptangular-forms
Ninja420
Ninja420

Reputation: 3882

Issue with Angular Forms : AbstractControl vs FormControl

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

Upvotes: 7

Views: 9417

Answers (2)

Sampath
Sampath

Reputation: 65940

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

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

Upvotes: -2

user4676340
user4676340

Reputation:

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>

Upvotes: 8

Related Questions