<div ng-form="vacancyForm">Angular.jsでサブフォームを作成しようとしています
多数のフィールドを持つデータの種類があります
- 見出し
- 利用可能日
- 価格
すべてrequired検証済みです。
そのデータを送信したら、必要な処理を行いますが、サブフォームをリセットして、すべてのフィールドがダーティでなく、フォームが有効になるようにします。現時点では、フィールドをクリアすることは機能しますが、すべてのフィールドがダーティであるため無効であり、空であるため無効としてマークされます。
例のフィールド
<div class="control-group" ng-class="getErrorClasses(vacancyForm.headline)">
<label class="control-label" for="headline">Headline</label>
<div class="controls">
<input type="text" class="input-xlarge" id="headline" name="headline" required ng-model="new_vacancy.headline">
<span class="help-inline" ng-show="showError(vacancyForm.headline, 'required')">This field is required</span>
</div>
</div>
送信時に呼び出される関数は次のとおりです
$scope.addVacancy = function(){
// save the submitted data
$scope.school.vacancies.push($scope.new_vacancy);
// now clear it out
$scope.new_vacancy = {};
$scope.new_vacancy.date = new Date();
// this clears out all the fields and makes them all invalid
// as they are empty. how to reset the form???
}
ベストアンサー1
サブフォームに属性を設定するnameと、 name 属性が$scope.formName.$setPristine();何でformNameあるかがわかります。値が変更されると、要素は元の状態ではなくなります。
http://docs.angularjs.org/api/ng.directive:form.FormController#$setPristine
アップデート
上記の回答は 1.2 のみを対象としていますが、1.3 では Angular に「タッチされた」入力の概念が導入されました。要素がぼやけている場合、Angular はフィールドをタッチされたものとしてマークします。 と同様に$setPristine、 を使用して入力を元に戻すことができます$scope.formName.$setUntouched()。
https://docs.angularjs.org/api/ng/type/form.FormController#$setUntouched
触れられた vs きれいな: touched はフィールドがぼやけていることを意味し、pristine はフィールドの値が変更されていることを意味します。Angular のドキュメントには、「フォーム コントロールを未変更の状態に戻すことは、フォームを元の状態に戻すときに役立つことが多い」と記載されています。
編集
フィドルのデモはこちらです:https://jsfiddle.net/TheSharpieOne/a30kdtmo/
angular.module('myApp', [])
.controller('myCtrl', myCtrl);
function myCtrl() {
var vm = this;
vm.reset = function() {
vm.myForm.$setPristine();
vm.myForm.$setUntouched();
vm.email = vm.password = '';
}
}.ng-invalid.ng-touched {
outline: 2px solid blue;
}
.ng-invalid.ng-dirty {
outline: 2px solid red;
}
.ng-invalid.ng-dirty.ng-untouched {
outline: 2px solid green;
}
form,
form div {
padding: 5px 10px;
}
h3,
h4 {
margin-bottom: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as ctrl">
<form name="ctrl.myForm">
<div>
<label for="email">Email</label>
<input name="myInput" type="email" ng-model="ctrl.email" id="email" required>
</div>
<div>
<label for="password">Password</label>
<input name="myPassword" type="password" minlength="8" ng-model="ctrl.password" id="password" required>
</div>
<div>
<button ng-click="ctrl.reset()" type="button">Reset</button>
</div>
</form>
<div>
<h4>Form Level</h4>
<div>$dirty: {{ctrl.myForm.$dirty}}</div>
<div>$pristine: {{ctrl.myForm.$pristine}}</div>
<h4>Input Level</h4>
<h5>Email Input</h5>
<div>$dirty: {{ctrl.myForm.myInput.$dirty}}</div>
<div>$pristine: {{ctrl.myForm.myInput.$pristine}}</div>
<div>$touched: {{ctrl.myForm.myInput.$touched}}</div>
<h5>Password Input</h5>
<div>$dirty: {{ctrl.myForm.myPassword.$dirty}}</div>
<div>$pristine: {{ctrl.myForm.myPassword.$pristine}}</div>
<div>$touched: {{ctrl.myForm.myPassword.$touched}}</div>
</div>
<div>
<h3>Color outlines for input</h3>
<div title="The form loads this way, it can still be invalid since required fields are empty to start with">untouched, pristine: no outline</div>
<div title="Such as in the middle of typing a valid email for the first time">invalid, untouched, dirty: green outline</div>
<div title="blurred with invalid input">invalid, touched, dirty: red outline</div>
<div title="focued and blurred without typing">invalid, touched: blue outline</div>
</div>
</div>