데이터를 지우지 않고 양식을 기본값으로 설정

데이터를 지우지 않고 양식을 기본값으로 설정

목록을 표시하는 양식이 있습니다.<input type="text">요소들.양식이 더러워질 때까지 사용할 수 없는 공통 저장 버튼을 공유합니다.그런 다음, 사용자가 저장 버튼을 클릭하면 데이터가 서버로 전송됩니다.서버가 데이터를 성공적으로 저장한 경우, 양식을 원래 상태로 재설정하지만, 사용자가 원하는 경우 모든 데이터를 추가로 편집할 수 있도록 양식에 보관합니다.

검색한 후에, 저는 그것을 찾았습니다.NgForm.reset()방법.이렇게 하면 양식이 기본값으로 설정되지만 안타깝게도 양식이 지워집니다.재설정 방법에는 값 매개 변수가 있는 것처럼 보이지만, 무엇을 하는지 알 수 없습니다.그럼에도 불구하고, 저는 데이터가 삭제되는 것을 원하지 않습니다.

저도 노력했습니다.myForm.pristine = true페이지를 다시 로드하는 원인이 됩니다.

여기 문제를 보여주는 플런커가 있습니다.

당신이 찾고 있는 것은myForm.markAsPristine().

현재 저는 두 가지 가능한 해결책을 제안할 수 있습니다.첫 번째는 당신이 제안한 것과 매우 가깝습니다, 형태의.reset메서드에는 다음과 같은 서명이 있으며 양식 값을 첫 번째 인수로 사용합니다.

//@angular/forms/src/model.d.ts:
reset(value?: any, {onlySelf}?: { onlySelf?: boolean; }): void;

제출 처리기에서 마지막 상태의 복사본을 캡처합니다.

const { myForm: { value: formValueSnap } } = this;

재설정 자체를 수행합니다.

this.myForm.reset(formValueSnap, false);

양식을 재설정할 수 없었던 시대의 또 다른 옵션은 각 컨트롤을 다음과 같이 표시하는 도우미 메서드를 만드는 것입니다.pristine데이터를 보관할 것입니다.재설정 대신 동일한 제출 도우미를 호출할 수 있습니다.

private _markFormPristine(form: FormGroup | NgForm): void {
    Object.keys(form.controls).forEach(control => {
        form.controls[control].markAsPristine();
    });
}

업데이트된 플런커에 연결합니다.

템플리트 기반 양식을 사용하는 경우 구성요소에 다음과 같은 것이 있을 경우:@ViewChild('myForm') myform: NgForm;

저는 그것을 발견했습니다.markAsPristine()폼 속성의 함수입니다.그래서 그렇게 될 것입니다.this.myform.form.markAsPristine().

다른 사람들이 마주칠 경우를 대비해 이걸 추가해야겠다고 생각했습니다.markAsPristine()정의되어 있지 않습니다.

Angular의 반응형 양식을 사용할 때 FormGroup에서 AsPristine()을 사용할 수 있습니다.

export class MyPage

  // Your form group
  public formGroup: FormGroup;

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      // Add your form controls here
    });
  }

  onSubmitForm() {
    // Get form value and save data on the server
    // ...

    this.formGroup.markAsPristine(); // <=== Mark form group as pristine
  }
}

참고 항목: AbstractControl.markAsPristine() 설명서를 참조하십시오.참고: FormGroup은 AbstractControl의 하위 클래스입니다.양식 그룹의 모든 하위 항목을 기본값으로 표시합니다.

나는 내 방법으로 이것을 해결했다고 생각합니다.

form.controls['contato'].reset();

나는 프리스티나()라는 마크를 찾지 못했습니다.form부동산, 그러나 나는 발견했습니다._pristine 소물유,this.myForm['form']._pristine 값은 로설수있니다습할정으▁로 설정할 수 있습니다.true.

@ViewChild('myForm') myForm: ElementRef;
this.myForm['form']._pristine = true;

양식을 재설정하려면:

this.form.reset();

언급URL : https://stackoverflow.com/questions/40690371/set-form-to-pristine-without-clearing-data