Używam ReactiveFormsModule
Angular2 do tworzenia komponentu zawierającego formularz. Oto mój kod:
foo.component.ts :
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'fullname': ['', Validators.required],
'gender': []
});
}
foo.component.html (z [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 (z 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>
Oba sposoby działają. Ale nie mogę dowiedzieć się, jaka jest różnica między używaniem [formControl]
a formControlName
.
angular
radio-button
angular2-forms
form-control
angular2-formbuilder
inteligentna mysz
źródło
źródło
Odpowiedzi:
Uważam, że pominął pan ważny punkt:
[formGroup]
dyrektywę w drugim przykładzie.formControlName
jest używany razem z,[formGroup]
aby zapisać w formularzu nawigację z wieloma kropkami. Na przykład:Jest równa:
Teraz wyobraź sobie zagnieżdżone
FormGroups
:)źródło
[formControl]
powoduje problem podczasform.valid
walidacji z formGroup, wszelkie komentarze[formControl]
przypisuje odniesienie do utworzonejFormControl
instancji doFormControlDirective
.formControlName
przypisuje ciąg dla modułu formularzy w celu wyszukania kontrolki według nazwy.Jeśli tworzysz zmienne dla kontrolek, nie potrzebujesz również tego, o
.
czym wspomniał Harry, ale sugerowałbym również użycie[formGroup]
zamiast tego, ponieważ w przypadku bardziej skomplikowanych formularzy może to stać się bałagan.źródło
Istnieje trzecia równoważność z dwoma podanymi w zaakceptowanej odpowiedzi, która jest następująca (niezalecane):
Zauważ, że nadal używamy dyrektywy [formGroup].
Jednak aby ten szablon kompilował się bez błędów, komponent musi zadeklarować kontrolki jako AbstractControls, a nie FormControls:
myComponent.ts
Należy jednak pamiętać, że deklarowanie AbstractControls nie jest zalecane , więc jeśli
Cannot find control with unspecified name attribute
pojawi się błąd , prawdopodobnie zmieszałeś style lub zadeklarowałeś kontrolki jako AbstractControls.źródło
Z dokumentacji Angular ( https://angular.io/guide/reactive-forms ):
Składnik
Szablon
źródło
z
[formControl]
tobą możesz skorzystać z zalet programowania reaktywnego, ponieważFormControl
ma właściwość o nazwievalueChanges
(znam tę w tej chwili, może jest więcej niż to), która zwraca wartość,Observable
którą możesz subskrybować i używać. (na przykład jest to bardzo przydatne w scenariuszach rejestrów, w których chcesz sprawdzić, czy wejściowy e-mail nie jest powtarzany, gdy tylko użytkownik zmieni wartość)źródło