Przekazywanie formularza do komponentu AngularJS w celu sprawdzenia poprawności

Question

Przenoszę moją starszą wersję kodu do architektury nowego komponentu wspieranej przez AngularJS 1.5. Podczas wykonywania tego dla większych formularzy napotkałem problem. Tradycyjnie, chciałbym dołączyć walidacji formularza następująco:

<form name="myForm"> 
    <input type="text" name="input1" ng-model="vm.input1" required /> 
    <div ng-messages="myForm.input1.$error"> 
    <div ng-message="required">Please fill out this field.</div> 
    </div> 
    <!-- many more inputs --> 
</form> 

Po przejściu do architektury komponentów, muszę jawnie przekazać formularz do komponentu:

<form name="vm.myForm"> 
    <my-awesome-input-component model="vm.input1" form="vm.myForm"><my-awesome-input-component> 
    <!-- many more inputs --> 
</form> 

Chciałbym uniknąć zanieczyszczających vm z moim formularzem. Czy istnieje lepszy sposób na uzyskanie pożądanej architektury komponentów dla formularzy?

Answer 1

Update - zmienił form-name do forma odniesienie, ponieważ nie było jednoznaczne, że mijaliśmy rzeczywiste odniesienie formularz, a nie tylko nazwę formularza. Można to nazwać czymkolwiek chcesz, po prostu bądź wolny od tego, co to jest.

Jak komentuje Iain Reid, nie trzeba do tego używać vm. Wystarczy wymienić postać cokolwiek chcesz, a następnie przekazać tę nazwę do elementu, tak to będzie wyglądać następująco:

<form name="myForm" ng-submit="ctrl.someFunction()" novalidate> 
    <my-input form-reference="myForm"></my-input> 
    <button type="submit">Some button</button> 
</form> 

Upewniwszy się, że piszesz „novalidate” w postaci wyłączenia walidacji domyślnej przeglądarce, jeśli chcę obsługiwać sprawdzanie poprawności na własną rękę (co, jak sądzę, robisz za pomocą komunikatów ng).

Następnie stamtąd na mój składnik Chciałbym napisać coś takiego:

angular.module("myApp") 
    .component("myInput",{ 
    templateUrl:'path/to/template.html' 
    bindings:{ 
     formReference:'<', 
     myInputModel:'<', 
     onUpdate:'&' 
    }, 
    controller: MyInputController 
    } 

a następnie w szablonie wejściowych:

<input type="text" name="myInput" ng-model="$ctrl.myInputModel" ng-change="$ctrl.update($ctrl.myInputModel)" required /> 
<div ng-messages="$ctrl.formReference.myInput.$error"> 
    <div ng-message="required">Please fill out this field.</div> 
</div> 

Kilka dodatkowych Uwagi dotyczące powiązań i jak przejść i zaktualizuj modele:

• '< ': oznacza sposób wiązania, który Angular mówi od teraz dla wszystkich komponentów . Aby zaktualizować wartość i mieć powiązanie dwukierunkowe , musimy włączyć funkcję "onUpdate".
• onUpdate: '&' co tu mówię, że przekażę funkcję , aby zaktualizować model (wywołanie zwrotne dla zdarzeń komponentu).

Więc w kontrolerze wejścia chciałbym napisać coś takiego:

function MyInputController(){ 
    var ctrl = this; 
    ctrl.update = function(value){ 
     ctrl.onUpdate({value: value}); 
    }; 
} 

I wreszcie, kiedy mogę używać komponentu wewnątrz postaci:

<form name="myForm" ng-submit="ctrl.someFunction()" novalidate> 
    <my-input form-reference="myForm" my-input-model="ctrl.anyModelIWant" on-update="ctrl.updateMyInput(value)"></my-input> 
    <button type="submit">Some button</button> 
</form> 

a kontroler formularza by mają funkcję:

... 
ctrl.updateMyInput = function(value){ 
    ctrl.anyModelIWant = value; 
} 
... 

Dokumenty urzędowe: https://docs.angularjs.org/guide/component

Mam nadzieję, że wszystko to pomaga kogoś tam :-)