각 명확한 하위 양식 데이터 및 재설정 유효성 검사

각 명확한 하위 양식 데이터 및 재설정 유효성 검사

---

<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???

    }

---

용도 <form>태그와 설정 name속성을 다음을 수행 할 수 있습니다 $scope.formName.$setPristine();어디 formNamename 속성이 무엇인지입니다. 값이 변경된 경우 요소는 더 이상 원래 상태가 아닙니다.

http://docs.angularjs.org/api/ng.directive:form.FormController#$setPristine

업데이트
위의 답변은 1.2 전용이지만 1.3 angular에서는 "터치 된"입력 개념이 도입되었습니다. 이제 요소가 흐려지면 각도가 필드를 터치 한 것으로 표시합니다. 유사하게 $setPristine, 당신은 사용하여 입력 등을 설정할 수 있습니다 $scope.formName.$setUntouched().

https://docs.angularjs.org/api/ng/type/form.FormController#$setUntouched

touched vs pristine : 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>

ReferenceURL : https://stackoverflow.com/questions/18648427/angular-clear-subform-data-and-reset-validation