AngularJS：防止隱藏表單字段被驗證

防止隱藏表單字段在AngularJS中被驗證的最佳方式是什麼？AngularJS：防止隱藏表單字段被驗證

來源

2013-10-01 siva636

等都可能只是刪除了'required'屬性，當你隱藏了它？ – Cherniv

如果你有代碼，請發佈它來幫助我們，有足夠的選項來實現你的邏輯，但是不要從頭開始，而只是改變你的代碼。小提琴/ PLUNKER會很棒 –

有沒有人回答你的問題？許多人只是給你選擇禁用所需的驗證，但沒有任何其他......像，數字......或者我錯過了什麼？ – genuinefafa

我最初錯過了內置ngRequired指令。還有一個required標籤，讓我困惑。

現在，我們可以使用相同的邏輯（我們用來隱藏元素）將ngRequired設置爲false。

下面是一個實際使用案例：我想問已婚的人他們有多少孩子，但是，如果他們沒有結婚，只是隱藏關於孩子的領域。

<form ng-app name="form"> 

    Marital status: 
    <select ng-model="maritalStatus" required> 
     <option value="">Select...</option> 
     <option value="M">Married</option> 
     <option value="UM">Unmarried</option> 
    </select> 

    <div ng-show="maritalStatus == 'M'"> 
     Number of children: <input type="number" ng-model="children" ng-required="maritalStatus == 'M'"> 
    </div> 

    (for testing) Is this form correctly filled? {{form.$valid}} 

</form>

來源

2013-10-02 09:00:18 siva636

很簡單，謝謝。我有一個子表單，它阻止了主表單的有效性，因爲子表單（不可見）的文本字段具有ng-required =「true」指令。現在一切都按預期工作！ – Sebastian

這將完全奏效;只要注意ng-if創建一個隔離範圍...如果你沒有考慮到這一點，可能會導致一些不良影響。 – djdmbrwsk

這裏有一種情況 - 首先我選擇已婚並且進入了no。的兒童和後來選擇未婚。現在，當我提交表單時，孩子的價值也被提交。我如何防止提交兒童的價值？ – Puni

您可以通過使用指令刪除required屬性：

<div ng-app="myApp"> 
<input type="backbutton" id="firstName" name="firstName" type="text" required/>

var app = angular.module('myApp',[]); 

app.directive('input',function($compile){ 
    return { 
    restrict:'E', 
    compile:function($tElement,$tAttrs){ 
     console.log("hi there"); 
     var el = $tElement[0]; 
     if(el.getAttribute('type')){ 
     el.removeAttribute('type'); 
     el.setAttribute($tAttrs.type,''); 
     return function(scope){ 
      $compile(el)(scope); 
     } 
     } 

    } 
    } 
}); 


app.directive('remove',function($compile){ 
    return { 
    restrict: 'A', 
    replace:true, 
    template:'', 
     link: function (scope, element, attrs) { 
      element.removeAttr('required'); 
     } 
    } 
});

見Fidlle here

前：

<input id="firstName" name="firstName" required="" remove="" class="ng-scope">

後：

<input id="firstName" name="firstName" remove="" class="ng-scope">

來源

2013-10-01 11:33:02

Fidlle什麼也沒做！？ – IamStalker

它從'input'中刪除'required'。你可以調試它，並檢查在開始時你有「必需」。 –

ahhh好的抱歉沒有注意到它。 – IamStalker

您也可以使用ng-if而不是ng-show將其從DOM /表格中完全添加或刪除。

<div ng-show="maritalStatus === 'M'"> 
    Number of children: <input type="number" ng-model="children" ng-required="maritalStatus == 'M'"> 
</div>

這個

<div ng-if="maritalStatus === 'M'"> 
    Number of children: <input type="number" ng-model="children" ng-required="true"> 
</div>

來源

2014-11-24 22:49:19 SoEzPz

如果您想要避免驗證多個元素，或者驗證比僅檢查元素是否爲空時更復雜，ng-if可以很好地工作。這假設你也想隱藏元素。 –

所以基本上你是刪除一切，甚至用戶輸入？ – Vignesh

整個div和這個地方的內容，但你也可以在輸入中使用ng-if，並跳過div。 – SoEzPz

AngularJS：防止隱藏表單字段被驗證

回答

相關問題