webentwicklung-frage-antwort-db.com.de

Angular2 Kein Provider für ControlContainer beim Erstellen eines einfachen Formulars

Das ist meine Form: 

app.component.html

<form [ngFormModel]="myForm">
    <my-child-component></my-child-component>
</form>    

app.component.ts

constructor ( private _formBuilder : FormBuilder ) {
    this.myForm = _formBuilder.group( {
        firstName : ["",Validators.required]
    } );
}

meine-Kind-Komponente: 

 <input type="text" ngControl="firstName">  

Error: 

   No provider for ControlContainer 
   [ERROR ->]<md-input
            ngControl="firstName"
            placeholder="First name">

Wenn ich die Eingabe innerhalb der App-Komponente selbst verschiebe, funktioniert sie, aber meine Eingabe befindet sich in einer untergeordneten Komponente.

FORM_DIRECTIVES und FORM_PROVIDERS werden auf oberster App-Ebene eingefügt. Ich habe genau alles nach ihren Führern gemacht.

Ich habe auch versucht, FORM_DIRECTIVES dem Kind oder app.component ohne Erfolg hinzuzufügen.

11
user4328424

Sie können die ngFormControl-Direktive anstelle von ngControl verwenden und die Steuerungsvariable wie folgt an das untergeordnete Input übergeben:

<form [ngFormModel]="myForm">
  <my-child-component [control]="myForm.controls.firstName"></my-child-component>
</form>

Untergeordnete Komponente

@Component({
  selector: 'my-child-component',
  template: `
    <input type="text" [ngFormControl]="control">  
  `,
  directives: [FORM_DIRECTIVES]
})
export class Child {
  @Input() control: Control;
}

Siehe auch plunkr https://plnkr.co/edit/ydRAOmFG6FU6lxTonWzj?p=preview

Die NgControl-Direktive ist in der Child-Vorlage als Form-Tag erforderlich

Siehe auch 

8
yurzui

Alternativ können Sie das vorhandene Formular aus dem übergeordneten Element verwenden, indem Sie es der untergeordneten Komponentendeklaration hinzufügen.

viewProviders: [{provide: ControlContainer, useExisting: NgForm}]
0
Alan Smith