基本角形式驗證工作不

模板：基本角形式驗證工作不

<div class="container"> 
<div class="row"> 
    <div class="col s12"> 
     <p>Add products here</p> 
     <form name="addProductForm" data-ng-submit="addProduct(addProductForm.$valid)" novalidate> 
      <label for="productName">Name</label> 
      <input name="productName" type="text" placeholder="name" data-ng-model="product.name" required="" /> 
      <p ng-show="addProductForm.name.$valid" >Wrong Name</p> 
      <p ng-show="addProductForm.name.$invalid" >Write Name</p> 
      <label for="productName">Type</label> 
      <input name="productName" type="text" placeholder="name" data-ng-model="product.type" required="" /> 
      <input type="submit" data-ng-disabled="addProductForm.$invalid" class="btn" value="Add" /> 
     </form> 
    </div> 
</div>

我已經添加了兩個p標籤一個與有效，其他無效的，但他們都沒有顯示出來。任何幫助將不勝感激。

來源

2016-11-17 sarabs3

看看您是否在瀏覽器中遇到F12（開發人員工具）中的任何錯誤。看看控制檯標籤 – lordkain

你在哪裏聲明你的控制器（ng控制器）和你的應用程序（ng-app）在你的html？ – deChristo

控制檯中沒有錯誤。控制器和應用程序是明確的一切其他工作 – sarabs3

問題出在您輸入的「名稱」屬性中。

<p ng-show="addProductForm.productName.$invalid" >Wrong Name</p> 
<p ng-show="addProductForm.productType.$invalid" >Write Name</p> 


<input name="productType" type="text" data-ng-model="product.type" required="" /> 
<input name="productName" type="text" placeholder="name" data-ng-model="product.name" required="" />

「name」屬性必須與您在條件中評估的任何內容匹配。

這裏是工作提琴：

http://jsfiddle.net/rskhLcnz/

來源

2016-11-17 13:21:52 yBrodsky

是的我已經改變了字段的名稱以匹配模型的名稱，它工作正常。謝謝 – sarabs3

我建議你使用ngMessages，而不是ngShow並記住字段名

<form name="myForm" ng-init="formData = {}"> 
     <input name="productName" type="text" ng-model="formData.productName" placeholder="Product name" required> 
     <div ng-messages="myForm.productName.$error"> 
     <div ng-message="required">This field is required</div> 
     </div> 
     <input name="productType" type="text" ng-model="formData.productType" placeholder="Product type" required> 
     <div ng-messages="myForm.productType.$error"> 
     <div ng-message="required">This field is required</div> 
     </div> 
     <input type="submit" ng-disabled="myForm.$invalid" class="btn" value="Add" /> 
    </form> 
    <pre>{{formData}}</pre>

Example

AngularJS Form Validation with ngMessages

來源

2016-11-17 13:43:09

基本角形式驗證工作不

回答

相關問題