Angular: bessere Formularvalidierungslösung

Question

Brauchen Sie Rat zur Formularvalidierung?

Ich habe Kontrollstruktur wie folgt:

<form name="myForm"> 
    <control-wrap> 
     <label isRequired="myForm.field1">Some text here</label> 
     <custom-control name="field1" 
        ng-required="true" 
        ng-something-else="any" 
        ng-model="modelForm.field1"></custom-control> 
     <info>Some data after control</info> 
     <error-list field="myForm.field1"></error-list> 
    </control-wrap> 

    <control-wrap> 
     <label isRequired="myForm.field2">Some text here</label> 
     <custom-control name="field2" 
        ng-required="true" 
        ng-something-else="any" 
        ng-model="modelForm.field2"></custom-control> 
     <info>Some data after control</info> 
     <error-list field="myForm.field2"></error-list> 
    </control-wrap> 

    <control-wrap> 
     <label isRequired="myForm.field3">Some text here</label> 
     <custom-control name="field3" 
        ng-required="true" 
        ng-something-else="any" 
        ng-model="modelForm.field3"></custom-control> 
     <info>Some data after control</info> 
     <error-list field="myForm.field3"></error-list> 
    </control-wrap> 
</form> 

Und das ist ganz schrecklich, unDRY und ich glaube, ich bin etwas sehr falsch.

Ich möchte aufhören zu verwenden Feldnamen, aber ich weiß nicht, wie ngModel an die Geschwister die richtige Weise übergeben (jetzt bin ich gezwungen, ngModel über Attribute an isRequired und Fehlerliste übergeben).

Beste Lösung für mich ist erfordern: "ngModel" von isRequired und Fehlerliste.

Jeder Rat wird sehr geschätzt.

P.S. gibt es keine Möglichkeit für mich, Felder in JSON-Objekt zu speichern, gibt es eine Menge Logik zwischen Feldern und verschiedene Optimierungen auf Etiketten und Hinweise.

Answer 1

Nun, kam ich zu dieser Lösung: https://plnkr.co/edit/mPXpEaZs2uWZb3WRkmgp?p=preview

Vielleicht ist es nicht die beste Lösung, aber ich weiß keine Namen mehr benötigen.

Die Hauptidee besteht darin, Modellreferenz auf den übergeordneten Container festzulegen und diese Referenz von anderen untergeordneten Elementen anzuzeigen.

Also am Ende habe ich:

<control-wrap> 
     <label link-required>Field1 label:</label> 
     <input link-to-wrap ng-model="mc.field1" 
      type="text" 
      ng-required="true" 
      ng-minlength="5" 
      ng-maxlength="10" /> 
     <errors-list></errors-list> 
    </control-wrap> 

UPDATE

Einige weitere Gedanken über Validierungsregeln mit Modellspeicher:

https://plnkr.co/edit/6ZVv685oSRDt7ELBKb9z?p=preview

Neue Richtlinie my-rules und erweiterte Daten in controller.js