html - Angular 2-skjema «Kan ikke finne kontroll»

Jeg prøver å bruke Angular 2 Forms for validering, men når jeg prøver å legge til mer enn én kontroll, ser det ut til at det bare blir ignorert. Jeg har fulgt mange forskjellige guider for å se hvordan alle andre gjør det, men ingen av de måtene ser ut til å fungere.

Det jeg har gjort, er dette i malen min:

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

Så i komponenten min gjør jeg dette:

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 jeg får stadig en «Kan ikke finne kontroll 'promotion'»-konsollfeil...

All hjelp vil bli satt pris på!

Svar #1

Dette er kanskje ikke svaret på det opprinnelige spørsmålet, men dette kan være nyttig hvis du hoppet hit fra Google.

Du trenger å sjekke disse tingene.

  1. Du må ha et "name"-attributt for alle kontrollene som har [ngModel]

  2. Hvis du ekskluderer noen felt fra validering, legg deretter til [ngModelOptions]="{standalone: true}" (huske den første regelen, du trenger fortsatt et "name")

  3. Sørg for at du har formControlName-attributt for kontrollene du skal validere. (huske den første regelen)

Svar #2

Jeg prøvde å opprette en ny FormGroup i komponenten min. Jeg har importert ReactiveFormsModule fra angular/forms og lagt den til i app.module.ts imports.

men jeg fikk Kan ikke finne navnet 'FormGroup' og Kan ikke finne navnet 'FormControl' feil

Her er min komponent

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

Å legge til importsetningen nedenfor i komponenten løste problemet mitt.

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

Ikke svaret på spørsmålet ditt, men legger ut dette da det kan hjelpe noen som møter samme feil.

Relaterte artikler