在不影響父表單的情況下驗證嵌套表單

angularjs 1.5中的嵌套表單存在驗證問題，並且存在issue in github about it。在不影響父表單的情況下驗證嵌套表單

但該主題中的2個人提供瞭解決方案，其中一個人已經打開了angularjs核心的ngFormTopLevel指令，另一個用戶提供的稱爲isolate-form。

但他們都不能處理這種情況，不適合我......至少！

讓我們假設這樣的結構：

<ng-form name="X1" novalidate> 

    <ng-form name="X2" novalidate isolate-form> 

     <input name="Input01" ng-model="input1" required /> 
     <p ng-show="X2.Input01.$touched && X2.Input01.$invalid">input is not valid</p> 

     <input name="Input02" ng-model="input2" required /> 

     <input type="button" id="ButtonX2" value="Submit Nested Form" ng-disabled="X2.$invalid" /> 

    </ng-form> 

<input name="Input03" ng-model="input3" required ng-minlength="5" /> 

<input type="button" id="ButtonX1" value="Submit Nested Form" ng-disabled="X1.$invalid" /> 

</ng-form>

TL;博士： ButtonX1依賴於嵌套的表單驗證，它不應該！

測試案例1：

步驟1：用任何文本和超過5個字符填寫輸入3。

預期：ButtonX1應該啓用。

結果：ButtonX1仍然被禁用。

測試用例2：

步驟1：使用任何文本填充INPUT1。

第2步：用任何文本填充input2。

預期：ButtonX2應該啓用。

結果：ButtonX2已啓用。

測試用例3：

步驟1：使用任何文本和超過5個字符的填充輸入3。

第2步：用任何文本填充input1。

第2步：用任何文本填充input2。

預期：應啓用ButtonX1和ButtonX2。

結果：ButtonX1和ButtonX2已啓用。

另一個問題是當嵌入式表單中的P標籤在Input01無效時不顯示。我試過了isolateForm和ngFormTopLevel，但他們都有這個問題。

來源

2016-06-21 M.R.Safari

請查看[this fiddle]（https://jsfiddle.net/zrbjvxew/1/）以上代碼+'isolate-form'指令。除非我不明白的問題的細節，*不*表現爲你想到！另請參閱'$ touched'文檔：「如果控件失去焦點，則爲true。」這意味着當你第一次輸入Input01並輸入無效的內容時（我添加了一個ng-minlength =「2」約束），錯誤信息將會顯示，因爲控件還沒有失去焦點，所以它被認爲是未觸及的（來自Angular IMO的不方便實現，但絕對按照規範）。 –

真棒！謝謝你的小提琴。它解決了我的問題。請更新你的答案，並在那裏提供搗鼓過，所以我可以將其標記爲一個答案。也更新你的html。順便說一句，這裏也是我的小提琴。 https://jsfiddle.net/HosnaSoft/90yf5tco/1/ –

我認爲這是根據您的要求的解決方案。

<ng-form name="X1" novalidate> 

     <ng-form name="X2" novalidate isolate-form> 

      <input name="Input01" ng-model="input1" required /> 
      <p ng-show="X2.Input01.$invalid && X2.Input01.$touched">input is not valid</p> 

      <input name="Input02" ng-model="input2" required /> 

      <input type="button" id="ButtonX2" value="Submit Nested Form" ng-disabled="X2.$invalid" /> 

     </ng-form> 

     <input name="Input03" ng-model="input3" required ng-minlength="5" /> 

     <input type="button" id="ButtonX1" value="Submit Nested Form" ng-disabled="X1.Input03.$invalid" /> 

    </ng-form>

來源

2016-06-23 11:30:20

我看到你在那裏做了什麼。但在X1中可能會有很多輸入，如Input03。考慮一下。 –

隔離窗體看起來不工作。還看到有人在項目的github中提到這一點 – MSIslam

它似乎唯一需要的是在父窗體控制器上調用$ removeControl。這個非常簡單的指令一直在爲我工作。適用於你的ng表單。

function isolateFormDirective() { 
    return { 
     restrict: 'A', 
     require: ['form', '^form'], 
     link: function(scope, element, attrs, forms) { 
      forms[1].$removeControl(forms[0]); 
     } 
    } 
} 

export default isolateFormDirective;

來源

2017-03-16 14:19:44 Sam

在不影響父表單的情況下驗證嵌套表單

回答

相關問題