Angular Clear 보조양식 데이터 및 재설정 유효성 검사

Angular Clear 보조양식 데이터 및 재설정 유효성 검사

보조양식을 작성하려고 합니다.<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???

    }

설정name보조양식의 속성을 지정하면 다음 작업을 수행할 수 있습니다.$scope.formName.$setPristine();어디에formName는 이름 속성입니다.값이 변경되면 요소는 더 이상 원본이 아닙니다.

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

갱신하다
위의 답변은 1.2만을 위한 것이었지만, 1.3 각도에서 "터치" 입력의 개념을 도입했습니다.요소가 각도로 흐려지면 필드가 터치된 것으로 표시됩니다.와 유사하다$setPristine, 를 사용하여 입력을 되돌릴 수 있습니다.$scope.formName.$setUntouched().

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

touched vs pairate: touched는 필드가 흐려졌음을 의미하며 pairate는 필드의 값이 변경되었음을 의미합니다.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>

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