Angular 2 Form "Cannot Find Control"

Question

I am trying to use Angular 2 Forms for validation, but when I try to add more than one control. It seems like it just gets ignored. I have followed many different guides to see how everyone else does it, but none of those ways seem to work.

What I have been doing is this in my template:

<form [formGroup]="form" novalidate (ngSubmit)="save(form.valid)">
<div class="row" id="message-wrapper">
   <label>Message</label>
   <small [hidden]="form.controls.message.valid || (form.controls.message.pristine && !submitted)">
        Message is required (minimum 10 characters).
    </small>
    <textarea 
        class="textarea-scaled"
        type="text"
        [(ngModel)]="campaign.message"
        formControlName="message"
        placeholder="This will be sent out by supporters with a URL back to this campaign">
     </textarea>
</div>

<div class="row" id="promo-wrapper">
    <label>Promotion: </label>
    <small [hidden]="form.controls.promotion.valid ||(form.controls.promotion.pristine && !submitted)">
      Promotion is required and should be between 10 and 100 characters
    </small>
    <textarea 
        class="textarea-scaled"
        type="text"
        [(ngModel)]="campaign.promotion"
        formControlName="promotion"
        placeholder="What would you like to be sent out in promotional messages?">
    </textarea>
</div>
</form>

Then in my component I do this:

form: FormGroup;

  constructor(private builder: FormBuilder,
              private _dataservice: DataService) {

      this.form = builder.group({
          "message": ['', [Validators.required, Validators.minLength(10)]],
          "promotion": ['', [Validators.required, Validators.minLength(10)]]
      });
  }

But I keep getting a "Cannot find control 'promotion'" console error...

Any help will be appreciated!

http://plnkr.co/edit/Am0qKHMIZ7reU7b6CR4d?p=preview works as expected. — micronyks, Jul 26 '16 at 16:42
That it does... It must be something else in my app messing with it. Because even with those changes mine still does not work. — Marcus Scaffidi, Jul 26 '16 at 16:47
might it be asynchronous data the formBuilder is waiting for? — niklas, Feb 17 '17 at 12:12

score 4 · Answer 1 · answered May 04 '17 at 02:23

4

This may not be the answer to the original question, but this may be useful if you jumped here from google.

You need to check these things.

You must have a "name" attribute for all the controls which has [ngModel]
If you exclude some fields from validation, then add [ngModelOptions]="{standalone: true}" (remember the first rule, still you need a "name")
Make sure you have formControlName attribute for the controls that you are going to validate. (remember the first rule)

answered May 04 '17 at 02:23

RasikaSam

5,363
6
28
36

Is not the case, but I got the error because I forgot to declare the **key** in the FormGroup initialization... – hestellezg Sep 20 '17 at 17:28
You don't need `name` attr if you have `formControlName`. – Javan R. Oct 23 '17 at 14:30

score 2 · Answer 2 · answered Oct 02 '17 at 21:28

I tried to create new FormGroup in my component. I've imported ReactiveFormsModule from angular/forms and added to app.module.ts imports.

but I was getting Cannot find name 'FormGroup' and Cannot find name 'FormControl' errors

Here is my component

export class SignupFormComponent {
  form1 = new FormGroup({
    username: new FormControl(),
    password: new FormControl()
  });
}

Adding the below import statement in component resolved my issue.

import { FormGroup, FormControl } from '@angular/forms';

Not the answer to your question but Posting as this might help someone who faces same error.

Angular 2 Form "Cannot Find Control"

2 Answers2

Linked