フォームの検証角度

私のフォームにいくつかのフィールドがあります&誰かがいっぱいであれば送信ボタンを有効にしたいのですが、どうすればいいですか？私がそれらの両方または誰かに必要を置くなら、それは私が望むようにうまくいかないでしょう。フォームの検証角度

<input type="text" name="phone"> 
<span ng-show="form.addContactForm.phone.$touched && form.addContactForm.phone.$error.required">Phone number or email is required</span> 
<input type="text" name="email"> 
<span ng-show="form.addContactForm.email.$touched && form.addContactForm.email.$error.required">Phone number or email is required</span> 
<button type="submit" ng-disabled="form.addContactForm.$invalid || form.addContactForm.$submitted">Submit</button>

電話やメールが入力された場合は、他のメッセージは、あなただけの

<input type="text" name="phone" ng-model="ctrl.phone"> 
<span ng-show="(form.addContactForm.phone.$touched || form.addContactForm.email.$touched) && !ctrl.phone && !ctrl.email">Phone number or email is required</span> 

<input type="text" name="email" ng-model="ctrl.email"> 
<span ng-show="(form.addContactForm.phone.$touched || form.addContactForm.email.$touched) && !ctrl.phone && !ctrl.email">Phone number or email is required</span> 

<button type="submit" ng-disabled="(!ctrl.phone && !ctrl.email) || form.addContactForm.$invalid || form.addContactForm.$submitted">Submit</button>

編集に条件を追加

出典

2016-06-28 Dheeraj Agrawal

隠す必要があります。エラーメッセージが表示され、条件

出典

2016-06-28 09:55:10 Icycool

よろしくお願い致します。メッセージも表示する必要があります。私の質問を編集してください –

-1

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<h2>Validation Example</h2> 

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate> 

<p>Username:<br> 
<input type="text" name="user" ng-model="user" required> 
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> 
<span ng-show="myForm.user.$error.required">Username is required.</span> 
</span> 
</p> 

<p>Email:<br> 
<input type="email" name="email" ng-model="email" required> 
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> 
<span ng-show="myForm.email.$error.required">Email is required.</span> 
<span ng-show="myForm.email.$error.email">Invalid email address.</span> 
</span> 
</p> 

<p> 
<input type="submit" 
ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
myForm.email.$dirty && myForm.email.$invalid"> 
</p> 

</form> 

<script> 
var app = angular.module('myApp', []); 
app.controller('validateCtrl', function($scope) { 
    $scope.user = 'John Doe'; 
    $scope.email = '[email protected]'; 
}); 
</script> 

</body> 
</html>

出典

2016-06-28 09:51:56

あなたが書いていないコードを使用する場合は、[あなたのソース]（http://www.w3schools.com/angular/tryit.asp?filename=try_ng_validate）を提供してください。 – Mistalis

最も簡単に追加しますこのフォームがあなたが持っているものであれば、ng-requiredを使って、eac hフィールドに依存します。フィールドが塗りつぶされている場合、もう一方は無効になるように、ng-disabledを追加しました。わかりやすくするために、私はエラーメッセージを含めませんでした。あなたがすでに持っている<span>を使用してください。

<div ng-app="app" ng-controller="Ctrl as c"> 
    <form name="contactForm"> 
    <input ng-model="c.phone" type="text" name="phone" 
      ng-required="!c.email" ng-disabled="c.email" /> 
    <input ng-model="c.email" type="text" name="email" 
      ng-required="!c.phone" ng-disabled="c.phone" /> 
    <button ng-disabled="contactForm.$invalid">Submit</button> 
    </form> 
</div>

関連フィドル：モデルが大きくなるとhttps://jsfiddle.net/k0L7c7jh/

、このようなソリューションは、（すなわち、検証がUI上に直接ルール）うまくスケールありません。このため私はモデルバリデーションが好きで、私が作成した目的のために私は自分の仕事でegkyron、bindsと同様にothersというJS検証フレームワークを使用しています。

出典

2016-06-28 11:12:37

答えて

関連する問題