html - Angular 2 Form "Kan inte hitta kontroll"

Jag försöker använda Angular 2 Forms för validering, men när jag försöker lägga till mer än en kontroll verkar det som om det bara ignoreras. Jag har följt många olika guider för att se hur alla andra gör det, men inget av de sätten verkar fungera.

Det jag har gjort är detta i min mall:

<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).
    
    <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
    
    <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>

Sedan gör jag så här i min komponent:

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)]]
      });
  }

Men jag får hela tiden ett konsolfel som säger "Kan inte hitta kontrollen 'promotion'"...

All hjälp kommer att uppskattas!

Svar #1

Detta kanske inte är svaret på den ursprungliga frågan, men detta kan vara användbart om du hoppade hit från Google.

Du behöver kolla dessa saker.

  1. Du måste ha ett "name"-attribut för alla kontroller som har [ngModel]

  2. Om du utesluter vissa fält från validering, lägg då till [ngModelOptions]="{standalone: true}" (kom ihåg den första regeln, du behöver fortfarande ett "name")

  3. Se till att du har formControlName-attributet för de kontroller som du ska validera. (kom ihåg den första regeln)

Svar #2

Jag försökte skapa en ny FormGroup i min komponent. Jag har importerat ReactiveFormsModule från angular/forms och lagt till det i imports i app.module.ts.

men jag fick Kan inte hitta namnet 'FormGroup' och Kan inte hitta namnet 'FormControl' fel

Här är min komponent

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

Att lägga till nedanstående import-sats i komponenten löste mitt problem.

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

Inte svaret på din fråga men publicerar detta eftersom det kan hjälpa någon som stöter på samma fel.

Relaterade artiklar