Ich verwende ReactiveFormsModule
Angular2, um eine Komponente zu erstellen, die ein Formular enthält. Hier ist mein Code:
foo.component.ts :
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'fullname': ['', Validators.required],
'gender': []
});
}
foo.component.html (mit [formControl]
):
<div class="fields">
<div class="field">
<label>Fullname*</label>
<input type="text" [formControl]="myForm.controls.fullname"/>
</div>
</div>
<div class="inline fields">
<label for="gender">Gender</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
<label>Male</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
<label>Female</label>
</div>
</div>
</div>
foo.component.html (mit formControlName
):
<div class="fields">
<div class="field">
<label>Fullname*</label>
<input type="text" formControlName="fullname"/>
</div>
</div>
<div class="inline fields">
<label for="gender">Gender</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" checked="" tabindex="0" class="hidden" formControlName="gender">
<label>Male</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="0" class="hidden" formControlName="gender">
<label>Female</label>
</div>
</div>
</div>
Beide Wege funktionieren. Aber ich kann nicht herausfinden, was der Unterschied zwischen [formControl]
und ist formControlName
.
Antworten:
Ich glaube, Sie haben einen wichtigen Punkt übersehen: die
[formGroup]
Richtlinie im zweiten Beispiel.formControlName
wird zusammen mit verwendet[formGroup]
, um Ihr Formular mit mehreren Punktnavigationen zu speichern. Beispielsweise:Ist äquivalent zu:
Stellen Sie sich jetzt verschachtelt vor
FormGroups
:)quelle
[formControl]
verursachtform.valid
Probleme während der Validierung mit formGroup, alle Kommentare[formControl]
weist derFormControl
Instanz, die Sie erstellt haben, einen Verweis zuFormControlDirective
.formControlName
Weist dem Formularmodul eine Zeichenfolge zu, um das Steuerelement nach Namen zu suchen.Wenn Sie Variablen für die Steuerelemente erstellen, benötigen Sie auch nicht die
.
von Harry erwähnten, aber ich würde auch empfehlen,[formGroup]
stattdessen zu verwenden, da dies bei komplizierteren Formularen unübersichtlich werden kann.quelle
Es gibt eine dritte Äquivalenz zu den beiden in der akzeptierten Antwort angegebenen: (nicht empfohlen):
Beachten Sie, dass wir weiterhin die Direktive [formGroup] verwenden.
Damit diese Vorlage jedoch fehlerfrei kompiliert werden kann, muss Ihre Komponente die Steuerelemente als AbstractControls und nicht als FormControls deklarieren:
myComponent.ts
Beachten Sie jedoch, dass das Deklarieren von AbstractControls nicht empfohlen wird. Wenn Sie also den Fehler erhalten,
Cannot find control with unspecified name attribute
ist es wahrscheinlich, dass Sie die Stile gemischt oder Ihre Steuerelemente als AbstractControls deklariert haben.quelle
Aus den Angular-Dokumenten ( https://angular.io/guide/reactive-forms) ):
Komponente
Vorlage
quelle
Mit können
[formControl]
Sie die Vorteile der reaktiven Programmierung nutzen, daFormControl
eine Eigenschaft mit dem NamenvalueChanges
(ich kenne diese derzeit , vielleicht gibt es mehr als diese) eine zurückgibt,Observable
die Sie abonnieren und verwenden können. (Dies ist beispielsweise in Registerszenarien sehr nützlich, in denen Sie überprüfen möchten, ob die Eingabe-E-Mail nicht wiederholt wird, sobald der Benutzer den Wert ändert.)quelle