각도 5 FormGroup 재설정이 검증자를 재설정하지 않습니다.

각도 5 FormGroup 재설정이 검증자를 재설정하지 않습니다.

때.FormGroup.reset()양식 클래스를 다음과 같이 설정합니다.ng-pristine ng-untouched그렇지만FormControl.hasError(...)여전히 진실로 돌아옵니다.내가 여기서 뭘 잘못하고 있는 거지?

템플릿

<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm)">
  <mat-form-field>
    <input matInput formControlName="email" />
    <mat-error *ngIf="email.hasError('required')">
      Email is a required feild
    </mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput type="password" formControlName="password" />
    <mat-error *ngIf="password.hasError('required')">
      Password is a required feild
    </mat-error>
  </mat-form-field>
  <button type="submit">Login</button>
</form>

요소

export class MyComponent {
  private myForm: FormGroup;
  private email: FormControl = new FormContorl('', Validators.required);
  private password: FormControl = new FormControl('', Validators.required);

  constructor(
    private formBuilder: FormBuilder
  ) {
    this.myForm = formBuilder.group({
      email: this.email,
      password: this.password
    });
  }

  private submitForm(formData: any): void {
    this.myForm.reset();
  }
}

플렁커

https://embed.plnkr.co/Hlivn4/

()FormGroup이 올바르게 동작합니다.양식에 사용자 이름과 암호가 필요하므로 양식을 재설정할 때는 유효하지 않습니다(사용자 이름/암호가 없는 양식은 유효하지 않습니다).

제가 제대로 이해했다면, 여기서 문제는 페이지를 처음 로드할 때 빨간색 오류가 나타나지 않고(양식도 유효하지 않음) 버튼을 클릭하면 나타나는 이유입니다.이 문제는 재료를 사용할 때 특히 두드러집니다.

AFAIK,<mat-error>FormGroupDirective,것은 아니다.FormGroup, FormGroup.FormGroupDirective를 해야합니다. , .<mat-error>입니다를 .FormGroupDirective뿐만 아니라.

이를 위해 템플릿에서 다음과 같이 변수를 정의합니다.

<form [formGroup]="myForm" #formDirective="ngForm" 
  (ngSubmit)="submitForm(myForm, formDirective)">

그리고 구성품 클래스에서 전화를 걸어보세요.formDirective.resetForm():

private submitForm(formData: any, formDirective: FormGroupDirective): void {
    formDirective.resetForm();
    this.myForm.reset();
}

GitHub 이슈 : https://github.com/angular/material2/issues/4190

Harry Ninh의 솔루션 외에 폼 버튼을 선택하지 않고 구성 요소의 formDirective에 액세스하려면 다음을 수행합니다.

템플릿:

<form 
  ...
  #formDirective="ngForm" 
>

구성요소:

import { ViewChild, ... } from '@angular/core';
import { NgForm, ... } from '@angular/forms';

export class MyComponent {
 ...
 @ViewChild('formDirective') private formDirective: NgForm;

  constructor(... )

  private someFunction(): void { 
    ...
    formDirective.resetForm();
  }
}

의견을 읽고 나면 올바른 접근 방식입니다.

// you can put this method in a module and reuse it as needed
resetForm(form: FormGroup) {

    form.reset();

    Object.keys(form.controls).forEach(key => {
      form.get(key).setErrors(null) ;
    });
}

에 .form.clearValidators()

속성 추가 -

@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;

합니다 요.this.myForm.reset();

this.formGroupDirective.resetForm();

이렇게 하면 오류 표시가 재설정되고 form.reset() 작업도 수행됩니다. 그 입니다를 입니다.ng-invalid

자세한 내용은 이 답변을 확인하세요 - https://stackoverflow.com/a/56518781/9262627

폼 그룹에서 특정 폼 컨트롤러를 재설정하려고 할 때 아래 솔루션이 저에게 효과가 있습니다.

 this.myForm.get('formCtrlName').reset();
 this.myForm.get('formCtrlName').setValidators([Validators.required, Validators.maxLength(45), Validators.minLength(4), Validators.pattern(environment.USER_NAME_REGEX)]);
 this.myForm.get('formCtrlName').updateValueAndValidity();

form.reset()Angular Material과 같은 사용자 정의 폼 컨트롤이 작동하지 않기 때문에 기능이 예상대로 작동하지 않습니다.

이것에 대한 나의 해결책은 이런 것입니다.

    this.form.reset();
    for (let control in this.form.controls) {
      this.form.controls[control].setErrors(null);
    }

this.form.reset()는 폼 는 재설정되지 이 코드 입니다로 입니다.

for (let control in this.form.controls) {
      this.form.controls[control].setErrors(null);
    }

만 있으면 를 가 없습니다.FormGroupDirective그게 제게 더 깨끗한 해결책입니다.

Github 이슈 : https://github.com/angular/angular/issues/15741

2021년부터 업데이트 - 각 11.2

사용 .[formGroup]="form그리고.#formDirective="ngForm"HTML 함수에 직접 들어가는 것은 좋은 방법이 아닙니다.아니면 당신이 사용하는 것이 더 좋을 수도 있습니다.@ViewChild 의 .ts 에서에서 해보세요.사실 문제는 앵글에서 나온 것이 아니라 머티리얼에서 나온 것입니다.

이들의 GitHub을 살펴보면 다음과 같은 내용이 나옵니다.

/** Provider that defines how form controls behave with regards to displaying error messages. */
@Injectable({providedIn: 'root'})
export class ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control && control.invalid && (control.touched || (form && form.submitted)));
  }
}

은 합니다.submittedstate. 그래서 마지막 부분만 삭제하면 됩니다.이것이 제 해결책입니다.재료 모듈을 가지고 있으며, 이를 구현했습니다.

export class ShowOnInvalidTouchedErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl): boolean {
    return !!(control && control.invalid && control.touched);
  }
}

@NgModule({
  providers: [
    {
      provide: ErrorStateMatcher, useClass: ShowOnInvalidTouchedErrorStateMatcher
    }
  ],
  exports: [
    MatSnackBarModule,
    MatTabsModule,
    ...
  ]
});

이 ErrorStateMatcher를 한 양식에만 사용하려면 가능합니다.이 자료 예시를 참조하시기 바랍니다.이것도 같은 원리입니다.

resetForm()과 reset()을 호출한 후 제출된 내용이 리셋되지 않고 true로 남아 오류 메시지가 표시됨을 확인했습니다.이 해결책은 저에게 효과가 있었습니다.select()와 focus()를 입력 태그에 호출할 수 있는 해결책을 찾던 중 발견했는데, 이 또한 예상대로 작동하지 않았습니다.설정된 Timeout()으로 줄을 감싸기만 하면 됩니다.setTimeout이 Angular에게 변경사항을 감지하도록 강요하고 있다고 생각하지만 틀릴 수 있습니다.약간의 해킹이지만, 효과는 있습니다.

<form [formGroup]="myFormGroup" #myForm="ngForm">
    …
    <button mat-raised-button (click)="submitForm()">
</form>

submitForm() { 
    …
    setTimeout(() => {
        this.myForm.resetForm();
        this.myFormGroup.reset();
    }, 0);
}

 resetForm() {
    this.myFormGroup.reset();
    this.myFormGroup.controls.food.setErrors(null);
    this.myFormGroup.updateValueAndValidity();
  } 

양식 지시를 재설정하는 데 운이 없었습니다.그러나 입력 상태를 보류 중으로 변경하여 이 작업을 수행할 수도 있습니다.

this.myForm.get("email").reset();
this.myForm.get("password").reset();

이것이 도움이 될 수 있는 모든 사람들에게, 저는 Angular 9.1.9를 실행하고 있고 양식/컨트롤을 단지 양식의 전체적인 유효성만을 재설정하고 싶지 않아서 그냥 실행했습니다.

this.registerForm.setErrors(null);

서...registerForm: FormGroup그리고 양식 오류를 재설정하여 다음과 같은 결과를 가져옵니다.

this.registerForm.valid

...true.

컨트롤에 대해서도 동일하게 수행할 수 있습니다.

this.registerForm.get('email').setErrors(null)

양식을 터치하는 즉시 이러한 오류는 어쨌든 재평가되므로, 오류 UI를 표시/숨기기 시작할 때 정확하게 핀다운하려면 부울 플래그가 있어야 합니다.

나는 내 경우에 그 지시를 건드릴 필요가 없었습니다.

저도 똑같은 문제를 겪고 있었습니다.의 문제는입니다를 이었습니다.mat-form-field그리고.formGroup한 후 .submitted플래그가 재설정되지 않았습니다.

, 은, 입니다의 하는 것입니다.ngForm와 함께formGroup과를 지나갑니다.onSubmit(form).@ViewChild('form') form; 난 했습니다.this.form.resetForm();

위에서 본 어떤 것도 저에게 적합하지 않았습니다(각도 7.2, 각도 재료 7.3.7).

보기에 이벤트를 제출하는 방법으로 통과합니다.

<form [formGroup]="group" (ngSubmit)="onSubmit($event)">
    <!-- your form here -->
</form>

그런 다음 재설정할 때 사용합니다.currentTarget그리고 그 후의 당신의 양식:

public onSubmit(event): void {
  // your code here
  event.currentTarget.reset()
  this.group.reset()
}

간단한 수정: 버튼 사용type="reset"기능.submitForm()함께.

<form [formGroup]="MyForm" (ngSubmit)="submitForm()">
  <input formControlName="Name">
  <mat-error>  
    <span *ngIf="!tunersForm.get('Name').value && tunersForm.get('Name').touched"></span>  
  </mat-error>
  <button type="reset" [disabled]="!MyForm.valid" (click)="submitForm()">Save</button>
</form>

언급URL : https://stackoverflow.com/questions/48216330/angular-5-formgroup-reset-doesnt-reset-validators