각도 반응 형-사용자가 UI 변경 사항을 원래 값으로 되돌릴 때 원래대로 재설정됩니까?

Question

양식 입력이 변경된 경우에만 양식에서 제출 버튼 을 활성화하고 싶습니다 .

제출 폼 컨트롤의 값이 변경되지 않을 때 버튼이 비활성화해야합니다.

제출 버튼 의 활성화 / 비활성화에 FormGroup.pristine 플래그 를 사용하려고했습니다 .

버튼을 활성화하는 데 잘 작동합니다.

그러나 trueUI의 값이 원래 값으로 다시 변경 될 때 재설정되지 않습니다 .

구성 요소 코드 :

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-registration-form',
  templateUrl: './registration-form.component.html',
  styleUrls: ['./registration-form.component.scss']
})
export class RegistrationFormComponent {
  public registrationForm;
  public formValues = {
      gender: 1,
    };

  constructor(private formBuilder: FormBuilder) {
    this.registrationForm = formBuilder.group(this.formValues);
  }

  onSubmit(formData) {
    console.log('Your form is submitted', formData);
    this.registrationForm.reset(this.formValues);
  }
}

<form class="registration-form" [formGroup]="registrationForm" (ngSubmit)="onSubmit(registrationForm.value)">
  <div>
    <label for="gender">Gender</label>
    <select id="gender" formControlName="gender">
      <option value=1>female</option>
      <option value=2>male</option>
      <option value=3>do not specify</option>
    </select>
  </div>
  <input type="submit" [disabled]="registrationForm.pristine">
</form>

기본적으로 선택 상자에서 "여성"옵션이 선택됩니다.

예를 들어 사용자가 "남성"으로 변경하면 제출 버튼이 활성화됩니다.

이제 사용자가 "여성"을 다시 선택하면 제출 버튼이 비활성화되지 않습니다.

사용자는 원래 상태로 되돌리고 버튼을 비활성화 하려면 제출 버튼 을 클릭 해야합니다.

사용자가 제출 버튼 을 클릭하지 않고 선택 상자 값을 기본값으로 되돌릴 때 원래 상태로 재설정하는 방법은 무엇입니까?

각도 버전 : 8.2.14.

최신 정보

슬프게도 각도는 사용자가 UI를 기본값으로 변경할 때 양식 상태를 원시 상태로 변경하지 않는 것 같습니다.

따라서 데이터 비교를 수행하고 양식을 원시 상태로 표시하는 코드를 작성해야합니다.

Answer 1

다음 과 같이 데이터가 defaultValue로 다시 변경 될 때 markAsPristine 메소드를 사용 하여 원시 상태를 true로 설정할 수 있습니다 .

ngOnInit() {
    const defaultValue = this.registrationForm.value;
    this.registrationForm.valueChanges
      .pipe(debounceTime(200))
      .subscribe(value => {
        if (JSON.stringify(defaultValue) == JSON.stringify(value)) {
          this.registrationForm.markAsPristine();
        }
      });
  }

Answer 2

아무것도 변경되지 않은 경우 제출 버튼을 비활성화하기 위해 true 또는 false를 반환하는 하나의 메서드를 만들 수 있습니다.

양식의 입력을 저장하는 데 사용되는 개체가 있다고 가정합니다.

기능은 아래 코드를 참조하십시오.

oldObj = _.cloneDeep(this.obj)
dataChanged(){
 return !_.isEqual(this.oldObj, this.obj)
}

그리고 html에서 아래 줄을 추가하십시오.

<input type="submit" [disabled]="!hasChanged()">