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!

Solution 1

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.

1. You must have a "name" attribute for all the controls which has [ngModel]

2. If you exclude some fields from validation, then add [ngModelOptions]="{standalone: true}" (remember the first rule, still you need a "name")

3. Make sure you have formControlName attribute for the controls that you are going to validate. (remember the first rule)

Solution 2

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.