Ich versuche, ein datengesteuertes Formular zu erstellen, bei dem die Eingaben von einer anderen Komponente kommen:
%Vor% Die Komponente app-form-group sieht ungefähr so aus:
Das Problem ist, dass formControlName eine formGroup Direktive benötigt, daher bekomme ich diesen Fehler:
Gibt es eine Möglichkeit, dieses Problem zu umgehen?
Sie können eine @Input-Eigenschaft verwenden, um die Referenz in die Unterkomponente zu bekommen:
app-form-group.ts:
%Vor%app.html:
%Vor%app-form-group.html:
%Vor%Detaillierte Informationen finden Sie in diesem Tutorial: Ссылка
Wenn Sie eine benutzerdefinierte Komponente für die Datenbindung an einen individuellen Wert implementieren möchten, ist die korrekte Winkelmethode die Vorgehensweise, bei der die übergeordnete Ansicht entweder [formControl] oder [formControlName] angibt.
In Ihrem Kindsteuerelement müssen Sie Folgendes tun:
Fügen Sie zuerst den folgenden Anbieter zu Ihrer @Component -Deklaration hinzu, damit Angular weiß, dass Ihre Komponente mit [formControlName] / [formControl]
Die Klasse Ihrer untergeordneten Komponente muss dann die Schnittstelle ControlValueAccessor implementieren. Dieses sollte ein voll funktionsfähiges Beispiel sein, wenn nicht, lassen Sie es mich wissen und ich werde den Code ändern, ich tippte es direkt in den Browser.
Ihre app-form-group Vorlage würde ungefähr so aussehen
[formGroup]="signupForm" zu jeder Ihrer app-form-group -Instanzen in Ihrer Hauptansicht hinzu app-form-group -Steuerelement. private controlContainer: ControlContainer dem Konstruktor Ihrer app-form-group -Komponente hinzu, damit Angular es injiziert public form: FormGroup; -Eigenschaft zu Ihrer app-form-group -Komponente hinzu. Fügen Sie in ngOnInit den folgenden Code hinzu
this.form = this.containerControl.control;
In Ihrer app-form-group Vorlage würden Sie [formGroup] wie folgt hinzufügen
Dies ist die Methode, die den geringsten Code erfordert. Diese Methode wird empfohlen, wenn Sie zusammengesetzte Steuerelemente einbetten möchten, die mehrere Datenelemente bearbeiten (z. B. eine Adresse).
Von diesem Blog - & gt; Ссылка
Tags und Links angular angular2-forms