私の質問は、大きなAngularアプリケーションのクライアント側の検証を処理することです。私は、ジップコントロールのような再利用可能なコンポーネントを含むさまざまなコンポーネントを持つ大きなSPAアプリを持っています。今では、これらのコンポーネントをページフォームに統合できますが、コンポーネント内に存在する要素の検証をどのようにトリガーできますか。例えば、私のzipコンポーネントは都市入力ボックス、状態選択ボックス、およびzip入力ボックスを持っていますが、今、どのようにフォーム送信からこれらのコンポーネントの検証をトリガーできますか？メインページのフォームからディレクティブ要素を検証する
私のアプリケーションには現在以下の解決策を使用しています。私はこのソリューションで必要なフィールドを検証することができます。
私は、フォーム内でディレクティブと他から2つの入力フィールド1を作成しました。両方のフィールドにエラーメッセージを表示することができます。同様に、これは他の形式のバリデーションのために行うことができます。ここで
は、あなたがこれまでにしようとしているものを私plunker https://plnkr.co/edit/laW9jYoNCszHlPeIl3Vs?p=preview
script.js
var app = angular.module('validationModule', []);
app.controller('mainCtrl', mainCtrl);
app.directive('testDirective', testDirective);
function testDirective(){
var testDirective = {
template: 'First Name: <input type="text" name="fName" required ng-model="user.firstName">'
};
return testDirective;
}
mainCtrl.$inject = ['$scope'];
function mainCtrl($scope){
$scope.submitForm = function(user){
alert(user.firstName + " " + user.lastName);
}
}
index.htmlファイル
<!DOCTYPE html>
<html ng-app="validationModule">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.js" charset="UTF-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-animate.js" charset="UTF-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-sanitize.js" charset="UTF-8"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.js" charset="UTF-8"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<form name="myForm" ng-submit="myForm.$valid? submitForm(user) : ''" novalidate>
<h1>Input User Name</h1><br/>
<test-directive></test-directive><br/>
Last Name: <input type="text" name="lName" required ng-model="user.lastName">
<button type="submit" class="btn btn-danger">Submit</button>
<div class="alert alert-danger" ng-show="myForm.$submitted">
<div ng-show="myForm.fName.$error.required">
First Name is required
</div>
<div ng-show="myForm.lName.$error.required">
Last Name is required
</div>
</div>
<br/><br/><br/>
<h1>Is form valid? {{myForm.$valid}}</h1>
</form>
</body>
</html>
のですか？ –