CODEWITHSUNDEEP
angularangular2-forms
Jordi
Jordi

Reputation: 23277

Form control not found

I've created this form inside ngOnInit() method:

this.cardForm = this.fb.group({
    card_number: ['', Validators.required],
    holderName: ['', Validators.required],
    expiry: ['', Validators.required],
    cvc: ['', Validators.required],
    address_line1: ['', Validators.required],
    address_line2: ['', Validators.required],
    address_city: ['', Validators.required],
    address_state: ['', Validators.required],
    address_zip: ['', Validators.required],
    address_country: ['', Validators.required]
  });

On my template:

<form [formGroup]="cardForm" novalidate="novalidate">
  <div class="form-group">
    <label for="cardnumber">Card number</label>
    <input 
      type="text"
      name="cardnumber"
      class="input-transparent form-control"
      formControlName="card_number"
      data-mask="9999-9999-9999-9999"
      placeholder="____-____-____-____"
      required="required">
 </div>

Nevertheless, I'm getting this error:

ERROR Error: Cannot find control with name: 'card_number'

Upvotes: 0

Views: 2247

Answers (2)

Long Field
Long Field

Reputation: 878

call: 

 this.cardForm = this.fb.group({...)}

in constructor, instead of ngOnInit()

Upvotes: 0

brijmcq
brijmcq

Reputation: 3418

You don't have an id in your input tag. Try to insert

<input
    id="card_number"
   ...
>

Update 1 If you could provide some more code that would help a lot. Since there is a Validators.required it should have a value. Anyways, just a hunch try to use this on your input.

[formControl]="cardForm.controls['card_number']"

instead of

formControlName="card_number"

Upvotes: 1

Related Questions