sprawdzanie poprawności kątowej 2 form za pomocą komponentów

Question

W Angular 2 w jaki sposób dodać kontrolkę wejściową w składniku niestandardowym, która będzie wiązała się z kontenerem formanta formularza w komponencie nadrzędnym? (Poniższy kod uproszczone dla zwięzłość)

Na przykład, mam składnik formularz (proszę zwrócić uwagę na przycisk wyłączone wiązania)

@Component{ 
selector:'my-form', 
template:' 
<form [ng-form-model]="myForm"> 
    <my-special-input></my-special-input> 
</form> 
<button [disabled]="!myForm.valid"> 
' 
} 

Teraz w moim specjalnym składnikiem wejściowego Chciałbym

@component{ 
selector:'my-special-input' 
template:' 
    <input ng-control='name' required> 
}' 

ng-control = 'name' generuje błąd "Brak dostawcy dla ControlContainer!" Szukałem rozwiązań i nie znalazłem żadnego, który pozwoliłby na sprawdzenie kontenera kontroli rodzica.

Myślę tworzenia składników wejściowych zwyczaj wielokrotnego użytku, które zostaną dodane do pojemnika sterowania formą byłby wspólny scenariusz w Kątowymi 2.

I cant obraz tam nie ma sposobu dodawania wejściowych w komponencie do niestandardowego element formularza nadrzędnego w sposób umożliwiający sprawdzenie poprawności na poziomie formularza.

Answer 1

Nie jestem pewien, czy jest to najlepszy sposób na Twój scenariusz, ale myślę, że to działa.

Można utworzyć element Control na elemencie nadrzędnym i przekazać go podrzędnie jako @Input. Dziecko może następnie użyć go jako elementu sterującego na elemencie formularza.

Na przykład (plunk):

@Component({ 
    selector:'my-special-input' 
    template:` 
     <input type="text" [ngFormControl]='nameControl' > 
    ` 
}) 
export class specialInputComponent implements OnInit{ 
    @Input() nameControl; 
} 

@Component({ 
    selector:'my-form', 
    template:` 
    <form [ngFormModel]="myForm" > 
     <my-special-input [nameControl]="nameControl"></my-special-input> 
    </form> 
    <button [disabled]="!myForm.valid">Submit</button> 
    `, 
    directives: [specialInputComponent] 
}) 
export class formComponent{ 
    nameControl:Control; 
    myForm: ControlGroup; 

    constructor(){ 
     this.nameControl = new Control("", Validators.required); 
     this.myForm = new ControlGroup({special: this.nameControl}); 
     } 
} 

prawdopodobnie można również przekazać ControlGroup do dziecka i pozwolić dziecku dodać sobie ze addControl() ale można mieć do czynienia z cyklu aktualizacji już trochę niechlujny.