angularjs 형식 재설정 오류

angularjs 형식 재설정 오류

저는 angularjs를 사용하여 검증과 함께 폼을 작성하려고 합니다.지금까지는 잘 해냈습니다.그러나 리셋 버튼을 커밋하면 검증 부분에서 표시되는 오류 메시지를 제외한 모든 필드가 리셋됩니다.폼을 리셋할 때 모든 필드 및 오류 메시지를 삭제하려면 어떻게 해야 합니까?

리셋 버튼을 누르면 이렇게 됩니다.

이건 내 코드야

<div class="page-header"><center><h2>Give us your Feedback</h2></center></div>

    <!-- pass in the variable if our form is valid or invalid -->
    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>

        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$dirty }">
            <label>Name*</label>
            <input type="text" name="name" class="item-input-wrapper form-control" ng-model="user.name"  required>
            <p ng-show="userForm.name.$invalid && !userForm.name.$pristine " class="help-block">
                <font color="#009ACD">You name is required.</font>
            </p>
        </div>

         <!-- EMAIL -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$dirty  }">
            <label>Email</label>
            <input type="email" name="email" class="item-input-wrapper form-control" ng-model="user.email" required >
            <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">
                <font color="#009ACD">Enter a valid email.</font>
            </p>
        </div>

        <!-- USERNAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$dirty }">
            <label>Description</label>
            <input type="text" name="username" class="item-input-wrapper form-control" ng-model="user.username"  ng-minlength="5" ng-maxlength="60" required>
            <font color="white">
                <p ng-show="userForm.username.$error.minlength" class="help-block">
                    <font color="#009ACD">Description is too short.</font>
                </p>
                <p ng-show="userForm.username.$error.maxlength" class="help-block">
                    <font color="#009ACD">Description is too long.</font>
                </p>
            </font>
        </div>

        <div class="col"style="text-align: center">
            <button align="left"class="button button-block button-reset"style="display: inline-block;width:100px;text-align:center "
                type="reset"
                ng-click="reset()" padding-top="true"
            >
                Reset
            </button>


            <button class="button button-block button-positive"  style="display: inline-block;width:100px "
                ng-click="submit()"
                padding-top="true"
            >
                Submit
            </button>
        </div>

    </form>
</div>

마이컨트롤러

.controller('ContactCtrl', function($scope,$state,$ionicPopup, $timeout) {
    $scope.showfeedback = function() {
        $state.go('app.sfeedback');
    };

    $scope.submitForm = function(isValid) {
        $scope.submitted = true;

        // check to make sure the form is completely valid
        if (!isValid) {
            var alertPopup = $ionicPopup.alert({
                title: 'Invalid data entered!',
            });
        } else {
            var alertPopup = $ionicPopup.alert({
                title: 'Feedback submitted',
            });
        }
    };

    $scope.reset = function() {
        var original = $scope.user;
        $scope.user= angular.copy(original)
        $scope.userForm.$setPristine()
    };
})

var original = $scope.user;

리셋 시:

$scope.user= angular.copy(original);
$scope.userForm.$setPristine();

제거한다.

type='reset' in  <button>

폼 컨트롤러의 Angular Documentation은 다음과 같습니다.

다음을 사용하여 더러운 상태를 재설정합니다.

$scope.form.$setPristine();

다음을 사용하여 유효성 검사를 지우도록 재설정합니다.

$scope.form.$setValidity();

FormController에 API 문서가 있습니다.

이를 통해 다음과 같은 다른 호출 방법이 있음을 알 수 있었습니다.

$setUntouched()- 사용자가 필드에 집중하고 필드를 떠난 경우 이 기능을 실행하면 이 기능이 지워집니다.

당신도 사용할 수 있는 간단한 폼 리셋 기능을 만들었습니다.

// Set the following in your controller for the form/page.
// Allows you to set default form values on fields.
$scope.defaultFormData = { username : 'Bob'}
// Save a copy of the defaultFormData
$scope.resetCopy = angular.copy($scope.defaultFormData);
// Create a method to reset the form back to it's original state.
$scope.resetForm =  function() {
    // Set the field values back to the original default values
    $scope.defaultFormData = angular.copy($scope.resetCopy);
    $scope.myForm.$setPristine();
    $scope.myForm.$setValidity();
    $scope.myForm.$setUntouched();
    // in my case I had to call $apply to refresh the page, you may also need this.
    $scope.$apply();
}

폼에서는 이 간단한 셋업을 통해 폼을 리셋할 수 있습니다.

<form ng-submit="doSomethingOnSubmit()" name="myForm">
    <input type="text" name="username" ng-model="username" ng-required />
    <input type="password" name="password" ng-model="password" ng-required />
    <button type="button" ng-click="resetForm()">Reset</button>
    <button type="submit">Log In</button>
</form>

저는...

$scope.form.$setPristine();
$scope.form.$error = {};

기분이 안 좋아...앵글에 관한 건 많죠

게다가...이게 유일하게 효과가 있었어요

같은 문제가 발생하여 다음 코드를 사용하여 폼을 완전히 리셋했습니다.

$scope.resetForm = function(){

    // reset your model data
    $scope.user = ...

    // reset all errors
    for (var att in  $scope.userForm.$error) {
        if ($scope.userForm.$error.hasOwnProperty(att)) {
            $scope.userForm.$setValidity(att, true);
        }
    }

    // reset validation's state
    $scope.userForm.$setPristine(true);
};

사용하고 있는 나에게$setPristine폼 리셋은 해킹이에요진정한 해결책은 다음과 같이 유지되는 것입니다.

<button type="reset" ng-click="reset()"></button>

각도:

var original = angular.copy($scope.user);
$scope.reset = function() {
   $scope.user = angular.copy(original);
};

그리고 이것이 마지막입니다.

이것을 사용하다

<button type="button" ng-click='resetForm()'>Reset</button>

컨트롤러 내

$scope.resetForm = function(){
   $scope.userForm.$dirty = false;
   $scope.userForm.$pristine = true;
   $scope.userForm.$submitted = false;
};

나한텐 효과가 있어

마스터(서버의 동적 모델)가 없고 폼을 재설정하고 모델의 바인딩 부분만 리셋하려는 경우 다음 스니펫을 사용할 수 있습니다.

  function resetForm(form){
    _.forEach(form, function(elem){
      if(elem !== undefined && elem.$modelValue !== undefined){
        elem.$viewValue = null;
        elem.$commitViewValue();
      }
    });
  }

그리고 스탠다드와 함께 사용할 수 있습니다.reset button다음과 같이 합니다.

<button type="reset" ng-click="resetForm(MyForm);MyForm.$setValidity();">reset</button>

피드백을 주세요.

<!-- pass in the variable if our form is valid or invalid -->
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>


    <!-- NAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$dirty }">
        <label>Name*</label>
        <input type="text" name="name" class="item-input-wrapper form-control" ng-model="user.name"  required>
        <p ng-show="userForm.name.$invalid && !userForm.name.$pristine " class="help-block"><font color="#009ACD">You name is required.</font></p>


    </div>

     <!-- EMAIL -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$dirty  }">
        <label>Email</label>
        <input type="email" name="email" class="item-input-wrapper form-control" ng-model="user.email" required >
        <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block"><font color="#009ACD">Enter a valid email.</font></p>
    </div>

    <!-- USERNAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$dirty }">
        <label>Description</label>
        <input type="text" name="username" class="item-input-wrapper form-control" ng-model="user.username"  ng-minlength="5" ng-maxlength="60" required>
        <font color="white"><p ng-show="userForm.username.$error.minlength" class="help-block"><font color="#009ACD">Description is too short.</font></p>
        <p ng-show="userForm.username.$error.maxlength" class="help-block"><font color="#009ACD">Description is too long.</font></p>
    </div>

    <div class="col"style="text-align: center">
        <button align="left"class="button button-block button-reset"style="display: inline-block;width:100px;text-align:center "
        type="reset"
        ng-click="reset()"padding-top="true">Reset</button>


        <button class="button button-block button-positive"  style="display: inline-block; width:100px" ng-click="submit()"padding-top="true">Submit</button>
        </div>

</form>

나는 그것을 보관했다.type="reset"내 단추 안에.제가 한 건ng-click="resetForm(userForm)"(사용)userFrom(예시와 일치하도록) 컨트롤러에 의해 정의됩니다.resetForm()~하듯이

scope.resetForm = function(controller) {
  controller.$commitViewValue();
  controller.$setPristine();
};

다음과 같이 됩니다.

1. 리셋 버튼을 클릭하면 에 의해 지정된 원래 값이 반환됩니다.value입력 속성
2. 그$commitViewValue()현재 뷰에 있는 모든 것을 강제로 에 씁니다.$modelValue(수동으로 반복할 필요가 없음) 각 필드의 마지막 필드$modelValue리셋이 아닌 그대로 저장됩니다.
3. 그$setPristine()는, 그 외의 모든 검증 및 송신 필드를 리셋 합니다.

내 각진 부트스트랩 검증기에는 이미FormController서류 자체를 통과시킬 필요는 없었습니다.

내 폼

<form angular-validator-submit="submitReview()" name="formReview"  novalidate angular-validator>

 <input type="text" name="Rating" validate-on="Rating" class="form-control"
   ng-model="Review.Rating" required-message="'Enter Rating'" required>
  <button type="button" ng-click="reset()">Cancel</button>
 </form>


app.controller('AddReview', function ($scope) {

    $scope.reset= function () {
        $scope.formReview.reset() 
    };
});

만 하면 $scope.formReview.reset()폼리뷰

폼이 다른 범위 내에 있으므로 솔루션에서 $$postDigest를 사용해야 합니다.

$scope.$$postDigest(function() {
    $scope.form.$error = {};
});

검증을 리셋 하려면 , 다음의 2개의 작업을 실시할 필요가 있습니다.

1. 밭을 일구다

2. 다음을 추가합니다.

   $scope.programCreateFrm.$dirty = false;
   $scope.programCreateFrm.$pristine = true;
   $scope.programCreateFrm.$submitted = false;
   

programCreateFrm폼 이름입니다.예를 들어 다음과 같습니다.

<form name="programCreateFrm" ng-submit="programCreateFrm.$valid && createProgram(programs)" novalidate>

이 코드는 나에게 효과가 있다.

언급URL : https://stackoverflow.com/questions/26015010/angularjs-form-reset-error