Açısal Grup alan gruplarının geçerliliği

Question

AngularJS doğrulaması, ng-required ile düzgün çalışıyor, ancak fieldet'in içindeki tüm form öğelerinin geçerli olup olmadığını görmek istiyorum.

<form> 
    <fieldset> 
     <legend> 
      Part one 
      <img src="/correct.png" ng-show="part_one_valid"> 
     </legend> 
     <input type="text" ng-required=1 ng-model="name" placeholder="name"> 
     <input type="text" ng-required=1 ng-model="foobar" placeholder="email"> 
    </fieldset> 

    <fieldset> 
     <legend> 
      Part two 
      <img src="/correct.png" ng-show="part_two_valid"> 
     </legend> 
     <input type="text" ng-required=1 ng-model="name" placeholder="name"> 
     <input type="text" ng-required=1 ng-model="foobar" placeholder="email"> 
    </fieldset> 
</form> 

Bu, basitleştirilmiş HTML yapısının yapısıdır. Ne yapmak istiyorum, alanın içindeki giriş alanları geçerli olduğunda görüntüyü gösterir.

Answer 1

Her fieldet üzerinde ng-form='formX' yönergesini kullanmanız gerekir (çünkü bir form etiketini diğerinin içine yerleştiremezsiniz). Daha sonra,

'un içindeki tüm alanları <img src='myimg.jpg' ng-show='!!formX.$errors.required' /> kullanın. Bunu kapsüllemek için yönerge oluşturabilirsiniz. Birden formları kullanmadan birbirlerine iç içe olabilir ng-form direktifi ait

<form> 
    <fieldset ng-form='form1'> 
     <legend> 
      Part one 
      <img src="/correct.png" ng-show="!!form1.$errors.required"> 
     </legend> 
     <input type="text" ng-required=1 ng-model="name" placeholder="name"> 
     <input type="text" ng-required=1 ng-model="foobar" placeholder="email"> 
    </fieldset> 

    <fieldset ng-form='form2'> 
     <legend> 
      Part two 
      <img src="/correct.png" ng-show="!!form2.$errors.required"> 
     </legend> 
     <input type="text" ng-required=1 ng-model="name" placeholder="name"> 
     <input type="text" ng-required=1 ng-model="foobar" placeholder="email"> 
    </fieldset> 
</form> 

Answer 2

avantajlarını kullanın. Bir form gibi davranmak ve name bazı özel name vermek içinyapmak için yönergesini kullanmanızı öneririm, form öğelerinizi form formları üzerinde form doğrulaması etkinleştirmek için öğelerinde hem de form hem de name özniteliği kullanmanız gerekir şeklinde.

Biçimlendirme

<form name="myForm"> 
    <fieldset ng-form="part_one"> 
     <legend> 
      Part one 
      <img src="/correct.png" ng-show="part_one.$valid"> 
     </legend> 
     <input type="text" name="name" ng-required=1 ng-model="name" placeholder="name"> 
     <input type="text" name="foobar" ng-required=1 ng-model="foobar" placeholder="email"> 
    </fieldset> 

    <fieldset ng-form="part_two"> 
     <legend> 
      Part two 
      <img src="/correct.png" ng-show="part_two.$valid"> 
     </legend> 
     <input name="name" type="text" ng-required=1 ng-model="name" placeholder="name"> 
     <input name="foobar" type="text" ng-required=1 ng-model="foobar" placeholder="email"> 
    </fieldset> 
</form>