Come accedere a child ngModel da una direttiva?

Question

Come in this question, voglio aggiungere .error su un campo del campo principale .control-group quando scope.$invalid è vero.

Tuttavia, la codifica del nome del modulo come in ng-class="{ error: formName.fieldModel.$invalid }" significa che non posso riutilizzarlo in forme diverse, inoltre preferisco non ripetere questa dichiarazione ovunque.

ho pensato che una direttiva che sembra qualcosa di simile potrebbe funzionare:

<div class="control-group" error-on="model1, model2"> 
    <input ng-model="model1"> 
    <input ng-model="model2"> 
</div> 

Così, quando sia model1 o model2 non è valido, .control-group ottiene .error aggiunto.

My attempt here. È possibile accedere ai modelli dalla direttiva, dati i nomi dei modelli?

Se c'è un approccio migliore, mi piacerebbe sentirlo anche io.

Answer 1

non credo che scrivere una direttiva personalizzato è necessery per questo caso d'uso come il ng-form directive è stato creato proprio per situazioni come quelle. Dalla documentazione della direttiva:

E 'utile per le forme nido, per esempio, se la validità di un sottogruppo di controlli deve essere determinato.

Prendendo il codice di esempio si potrebbe scrivere:

<div class="control-group" ng-class="{ error: myControlGroup1.$invalid }> 
    <ng-form name="myControlGroup1"> 
    <input ng-model="model1"> 
    <input ng-model="model2"> 
    </ng-form> 
</div> 

Utilizzando questa tecnica non è necessario ripetere le espressioni usate in ng-modello e possibile riutilizzare questo frammento all'interno di qualsiasi forma.

Answer 2

All'interno della funzione di collegamento è possibile accedere allo formController. Ha tutti i controlli. Così Di seguito vi darà l'accesso alla direttiva .$valid:

el.controller('form')[attrs.errorOn].$valid 

Tuttavia, non so come guardare che per le modifiche. Ho provato a guardare attrs.errorOn (ad esempio, osservare la proprietà ng-model), ma l'orologio non si attiva a meno che non venga immesso un valore valido (a causa del modo in cui le forme angolari funzionano ... a meno che quel valore sia valido, non è assegnato a la proprietà scope impostata da ng-model.)

Fiddle.

Forse qualcuno può prendere questo ulteriore ...

Answer 3

si può anche cambiare il markup nella risposta accettato di fare a meno della nidificazione, dal momento che ng-form è anche una direttiva classe:

<div class="control-group ng-form" name="controlGroup11" ng-class="{ error: controlGroup1.$invalid }> 
    <input ng-model="model1"> 
    <input ng-model="model2"> 
</div> 

Final solution Fiddle