Angular 2 tworzenie form reaktywnych z komponentami zagnieżdżonymi

Question

Moim wymaganiem jest to, że muszę utworzyć formularz z komponentami zagnieżdżonymi. Tworzę komponenty dla każdego pola formularza oznacza dla pola tekstowego będzie być jednym komponentem, dla przycisku radiowego będzie inny składnik, taki jak mądry.
<form [formGroup]="myForm">
<textbox-component></textbox-component>
<radioButton-component></radioButton-component>
</form>

I chcę używać form reaktywnych przy tworzeniu tej formy jak chcę mój html być nietknięte i mam moje walidacje formularza przez jedynego maszynopisu.

Ale nie mogę znaleźć rozwiązania, jak możemy mieć reaktywne formularze zagnieżdżone z komponentami .

Answer 1

Po przeprowadzeniu moich eksperymentów badawczych, znalazłem jedną odpowiedź na moje pytanie, więc sam odpowiedziałem. Jeśli to uratuje czyjś czas, będę szczęśliwy.

Jeśli chcesz stworzyć reaktywne formy z zagnieżdżonych elementów to można zrobić jak poniżej

Tutaj tworzę formularz z dwóch zagnieżdżonych elementów jeden na tekstowym & inne na przycisk radiowy

komponentu rodzic może być jak ten

<form [formGroup]="myForm"> 
    <child-textbox-component [parentFormGroup]="myForm"> 
    </child-textbox-component> 
    <child-radio-button-component [parentFormGroup]="myForm"> 
    </child-radio-button-component> 
</form> 

Jesteśmy przechodzącej obiektu FormGroup jako wejście do elementów podrzędnych, które zostały utworzone w składniku dominującej jako wejście do komponentu dziecka s, będą korzystać z tego obiektu FormGroup w ich komponentu zaprojektować konkretną kontrolę klasy

komponentów dziecko będzie tak

Rodziny z pola tekstowego składnika

<div class="form-group" [formGroup]="parentFormGroup"> 
    <label> 
    {{control.caption}} 
    </label> 
    <input class="form-control" type="text" [title]="control.toolTip" 
    [attr.maxlength]="control.width" [name]="control.name" 
    [value]="control.defaultValue" [formControlName]="control.name"/> 
</div> 

dziecko-radio- przycisk jednoskładnikowy

<div class="form-group" [formGroup]="parentFormGroup"> 
    <label> 
    {{control.caption}} 
    </label> 
    <div> 
     <label *ngFor="let value of control.values; let idx = index" 
     class="radio-inline" [title]="control.tooltip"> 
     <input type="radio" [name]="control.name" [formControlName]="control.name"/> 
     {{ value }} 
     </label> 
    </div> 
</div> 

Tu kontrola jest dane klasa modelu gospodarstwa mają być wyświetlane dla tych komponentów potomnych.

W ten sposób można wygenerować formularz za pomocą komponentów zagnieżdżonych, , więc nie trzeba mieć formularza (można powiedzieć, duży formularz) w pojedynczym komponencie . Możesz go rozbić na tyle sub-elementów, aby uzyskać & formularz & łatwo utworzyć & zachować również za pomocą reaktywnych form kątowych 2. Możesz również łatwo dodać walidacje zbyt.

że następnie te połączenia odpowiedzi na to

1. something similar on stackoverflow

2. angular 2 dynamic forms

Answer 2

prostu przejść samą lub sub formGroup w postaci bloku za pomocą [formGroup] wiążące.