Angular.js가 프로그래밍 방식으로 양식 필드를 더티로 설정

Angular.js가 프로그래밍 방식으로 양식 필드를 더티로 설정

---

내 양식의 일부 필드를 값으로 프로그래밍 방식으로 업데이트하고 필드 상태를 설정하고 싶습니다 $dirty. 다음과 같이합니다.

$scope.myForm.username.$dirty = true; 작동하지 않는 것입니다.

$setPristine필드 상태를 유지하는 데 사용할 수 있는 방법 이 $setDirty방법이 없습니까?

그럼 어떻게해야할까요?

게시물이 https://groups.google.com/forum/#!topic/angular/NQKGAFlsln4를 보았지만 $setDirty방법 을 찾을 수없는을 구석으로 같습니다 . Angular 버전 1.1.5를 사용하고 있습니다.

---

AngularJS 1.3.4부터는 $setDirty()필드 ( source ) 에서 사용할 수 있습니다 . 다음을 수행 할 수 있습니다.

angular.forEach($scope.form.$error.required, function(field) {
    field.$setDirty();
});

---

귀하의 경우 $scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue);에는 트릭을 수행하십시오. 양식과 필드를 모두 더럽 히고 적절한 CSS 클래스를 추가합니다.

솔직히 말해서 질문의 링크에서 주제의 새 게시물 에서이 솔루션을 찾았습니다. 그것은 나를 위해 완벽하게 작동 때문에 쉽게 사용할 수 있습니다 독립형 대답으로 여기에 넣습니다.

편집하다 :

위의 솔루션은 최대 1.3.3의 Angular 버전에서 가장 잘 작동합니다. 1.3.4 시작하면 새로 노출 된 API을 사용해야 방법 $setDirty()에서을 ngModel.NgModelController.

---

필드 에 대해 및 로 수동으로 설정 $dirty해야 합니다. 입력에 클래스를 표시 할 요소에서 클래스 를 수동으로 추가 하고 제거 해야합니다 . 양식 수준에서 사용 하여 양식 자체에서 모든 작업을 수행 할 수 있고 양식 입력은 불가능하며, 현재 언급 한대로 양식 입력에는 없습니다 .true$pristinefalseng-dirtyng-pristine$setDirty()$setDirty()

이 답변은 $setDirty()입력에 추가해야하는 사항 변경 될 수 있습니다.

---

NgModelController에 , 대한 액세스 권한이있는 경우 (지시문에서만 액세스 할 수 있음) 다음을 호출 할 수 있습니다.

ngModel.$setViewValue("your new view value");
// or to keep the view value the same and just change it to dirty
ngModel.$setViewValue(ngModel.$viewValue);

---

이 문제를 해결하는 jsFiddle을 만들었습니다. $ dirty를 true로 설정하기 만하면 $timeout 0DOM 이로 드 된 후 실행됩니다.

여기에서 찾기 : JsFiddle

$timeout(function () {
  $scope.form.uName.$dirty = true;
}, 0);

---

이것이 나를 위해 일한 것입니다.

$scope.form_name.field_name.$setDirty()

---

$setDirty();방법 을 사용할 수 있습니다 . https://docs.angularjs.org/api/ng/type/form.FormController 문서 참조

예 :

$scope.myForm.$setDirty();

---

작업을 수행하는 도우미 기능 :

function setDirtyForm(form) {
    angular.forEach(form.$error, function(type) {
        angular.forEach(type, function(field) {
            field.$setDirty();
        });
    });
    return form;
}

---

각도 2

Angular 2에서 동일한 작업을 수행하려는 사람에게는 확보하는 것 외에는 매우 유사합니다.

<form role="form" [ngFormModel]="myFormModel" (ngSubmit)="onSubmit()" #myForm="ngForm">
<div class="form-group">
    <label for="name">Name</label>
    <input autofocus type="text" ngControl="usename" #name="ngForm" class="form-control" id="name" placeholder="Name">
    <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
        Name is required
    </div>
</div>
</form>
<button type="submit" class="btn btn-primary" (click)="myForm.ngSubmit.emit()">Add</button>

---

import { Component, } from '@angular/core';
import { FormBuilder, Validators } from '@angular/common';

@Component({
    selector: 'my-example-form',
    templateUrl: 'app/my-example-form.component.html',
    directives: []
})
export class MyFormComponent {
    myFormModel: any;

    constructor(private _formBuilder: FormBuilder) {
        this.myFormModel = this._formBuilder.group({
            'username': ['', Validators.required],
            'password': ['', Validators.required]
        });
    }

    onSubmit() {
        this.myFormModel.markAsDirty();
        for (let control in this.myFormModel.controls) {
            this.myFormModel.controls[control].markAsDirty();
        };

        if (this.myFormModel.dirty && this.myFormModel.valid) {
            // My submit logic
        }
    }
}

---

@rmag의 답변에 대한 작은 추가 메모입니다. 비어있는 더티 만들고 싶은 필수 필드가 있으면 사용하십시오.

$scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue !== undefined 
    ? $scope.myForm.username.$viewValue : '');

---

왜 필드를 더럽게 표시하려는 것이 모르겠지만 잘못된 양식을 건축 할 때 유효성 검사 오류가 표시되기 때문에 원 때문에 상황에 있습니다. 결국 jQuery를 사용하여 .ng-pristine클래스 태그 를 제거 .ng-dirty하고 적절한 필드에 클래스 태그를 추가했습니다 . 예를 들면 :

$scope.submit = function() {
    // `formName` is the value of the `name` attribute on your `form` tag
    if (this.formName.$invalid)
    {
        $('.ng-invalid:not("form")').each(function() {
            $(this).removeClass('ng-pristine').addClass('ng-dirty');
        });
        // the form element itself is index zero, so the first input is typically at index 1
        $('.ng-invalid')[1].focus();
    }
}

참고 URL : https://stackoverflow.com/questions/18071648/angular-js-programmatically-setting-a-form-field-to-dirty