제출 후 Angular 2에서 양식 재설정

제출 후 Angular 2에서 양식 재설정

---

Angular 2에는 현재 양식을 원래 상태로 쉽게 재설정하는 방법이 없다는 것을 알고 있습니다. 주위를 파고 들어 양식 필드를 재설정하는 아래와 같은 솔루션을 찾았습니다.

컨트롤 그룹을 삭제하고 새 그룹을 만들어 양식을 원래대로 다시 작성해야한다는 제안이있었습니다. 이 작업을 수행하는 가장 좋은 방법을 찾는 데 어려움이 있습니다. 함수 내에서 양식 건물을 래핑해야한다는 것을 알고 있지만 생성자 내에서이를 수행 할 때 오류가 발생합니다.

양식을 완전히 재설정하기 위해 제어 그룹을 다시 작성하는 가장 좋은 방법은 무엇입니까?

class App {

    name: Control;
    username: Control;
    email: Control;

    form: ControlGroup;

    constructor(private builder: FormBuilder) {

        this.name = new Control('', Validators.required);
        this.email = new Control('', Validators.required);
        this.username = new Control('', Validators.required);

        this.form = builder.group({
            name: this.name,
            email: this.email,
            username: this.username
        });
    }

    onSubmit(value: any): void {  
        // code that happens when form is submitted
        // then reset the form
        this.reset();
    }

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

---

> = RC.6

양식 재설정을 지원하고 submitted상태를 유지합니다 .

console.log(this.form.submitted);

this.form.reset()

또는

this.form = new FormGroup()...;

importat 업데이트

유효성 검사기와 같이 양식을 만들 때 양식 컨트롤을 상태로 설정하려면 몇 가지 추가 측정이 필요합니다.

양식 (html)의보기 부분에서 양식 *ngIf을 표시하거나 숨기려면을 추가하십시오.

<form *ngIf="showForm"

양식 (* .ts)의 구성 요소 측에서 다음을 수행하십시오.

  showForm:boolean = true;

  onSubmit(value:any):void {
    this.showForm = false;
    setTimeout(() => {
    this.reset()
      this.showForm = true;
    });
  }

다음은 더 자세한 예입니다.

export class CreateParkingComponent implements OnInit {
  createParkingForm: FormGroup ;
  showForm = true ;

  constructor(
    private formBuilder: FormBuilder,
    private parkingService: ParkingService,
    private snackBar: MatSnackBar) {

      this.prepareForm() ;
  }

  prepareForm() {
    this.createParkingForm = this.formBuilder.group({
      'name': ['', Validators.compose([Validators.required, Validators.minLength(5)])],
      'company': ['', Validators.minLength(5)],
      'city': ['', Validators.required],
      'address': ['', Validators.compose([Validators.required, Validators.minLength(10)])],
      'latitude': [''],
      'longitude': [''],
      'phone': ['', Validators.compose([Validators.required, Validators.minLength(7)])],
      'pictureUrl': [''],
      // process the 3 input values of the maxCapacity'
      'pricingText': ['', Validators.compose([Validators.required, Validators.minLength(10)])],
      'ceilingType': ['', Validators.required],
    });
  }

  ngOnInit() {
  }


  resetForm(form: FormGroup) {
    this.prepareForm();
  }

  createParkingSubmit() {
    // Hide the form while the submit is done
    this.showForm = false ;

    // In this case call the backend and react to the success or fail answer

    this.parkingService.create(p).subscribe(
      response => {
        console.log(response);
        this.snackBar.open('Parqueadero creado', 'X', {duration: 3000});
        setTimeout(() => {
          //reset the form and show it again
          this.prepareForm();
            this.showForm = true;
          });
      }
      , error => {
        console.log(error);
        this.showForm = true ;
        this.snackBar.open('ERROR: al crear Parqueadero:' + error.message);
      }
      );
  }
}

플 런커 예

original <= RC.5 폼을 생성하는 코드를 메서드로 옮기고 제출을 처리 한 후 다시 호출하면됩니다.

@Component({
  selector: 'form-component',
  template: `
    <form (ngSubmit)="onSubmit($event)" [ngFormModel]="form">
       <input type="test" ngControl="name">
       <input type="test" ngControl="email">
       <input type="test" ngControl="username">
       <button type="submit">submit</button>
    </form>
    <div>name: {{name.value}}</div>
    <div>email: {{email.value}}</div>
    <div>username: {{username.value}}</div>
`
})
class FormComponent {

  name:Control;
  username:Control;
  email:Control;

  form:ControlGroup;

  constructor(private builder:FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.name = new Control('', Validators.required);
    this.email = new Control('', Validators.required);
    this.username = new Control('', Validators.required);

    this.form = this.builder.group({
      name: this.name,
      email: this.email,
      username: this.username
    });
  }

  onSubmit(value:any):void {
    // code that happens when form is submitted
    // then reset the form
    this.reset();
  }

  reset() {
    this.createForm();
  }
}

플 런커 예

---

의 공개 API 에 공식적으로 문서화 된 방법이기 때문에 대신 NgForm's를 사용하십시오 . (참조 [ 1 ]).resetForm().reset()NgForm

<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm">

.resetForm()방법은 재설정 NgForm'들 FormGroup과의 설정 submit에 플래그 false(참고 [ 2 ]).

@angular 버전 2.4.8 및 4.0.0-rc3에서 테스트되었습니다.

---

Angular 2 Final의 경우 이제 양식을 깔끔하게 재설정하는 새로운 API가 있습니다.

@Component({...})
class App {

    form: FormGroup;
     ...
    reset() {
       this.form.reset();
   }
}

이 API는 양식 값을 재설정 할뿐만 아니라 양식 필드 상태를 ng-pristine및로 다시 설정합니다 ng-untouched.

---

양식에 대한 Angular 기본 가이드를 살펴보고 양식 재설정 섹션을 밟았을 때 그들이 제공하는 솔루션과 관련하여 다음을 읽었을 때 놀라움을 금치 못했습니다.

이는 적절한 양식 재설정 기능을 기다리는 동안 일시적인 해결 방법입니다.

저는 개인적으로 그들이 제공 한 해결 방법이 작동하는지 테스트하지 않았지만 (그렇다고 가정합니다) 깔끔하지 않으며 문제를 해결하는 더 좋은 방법이 있어야한다고 생각합니다.

안정된 것으로 표시된 FormGroup API 에 따르면 이미 'reset'메소드가 있습니다.

나는 다음을 시도했다. 내 template.html 파일에서

<form (ngSubmit)="register(); registrationForm.reset();" #registrationForm="ngForm">
    ...
</form>

Notice that in the form element, I've initialised a template reference variable 'registrationForm' and initialized it to the ngForm Directive, which "governs the form as a whole". This gave me access to the methods and attributes of the governing FormGroup, including the reset() method.

Binding this method call to the ngSubmit event as show above reset the form (including pristine, dirty, model states etc) after the register() method is completed. For a demo this is ok, however it isn't very helpful for real world applications.

Imagine the register() method performs a call to the server. We want to reset the form when we know that the server responded back that everything is OK. Updating the code to the following caters for this scenario.

In my template.html file :

<form (ngSubmit)="register(registrationForm);" #registrationForm="ngForm">
    ...
</form>

And in my component.ts file :

@Component({
  ...
})
export class RegistrationComponent {
  register(form: FormGroup) {

   ...

   // Somewhere within the asynchronous call resolve function
   form.reset();
  }
}

Passing the 'registrationForm' reference to the method would allow us to call the reset method at the point of execution that we want to.

Hope this helps you in any way. :)

Note: This approach is based on Angular 2.0.0-rc.5

---

I don't know if I'm on the right path, but I got it working on ng 2.4.8 with the following form/submit tags:

<form #heroForm="ngForm" (ngSubmit)="add(newHero); heroForm.reset()">
<!-- place your input stuff here -->
<button type="submit" class="btn btn-default" [disabled]="!heroForm.valid">Add hero</button>

Seems to do the trick and sets the form's fields to "pristine" again.

---

If you call only reset() function, the form controls will not set to pristine state. android.io docs have a solution for this issue.

component.ts

  active = true; 

  resetForm() {
      this.form.reset();
      this.active = false;
      setTimeout(() => this.active = true, 0);
  }

component.html

<form *ngIf="active">

---

I used in similar case the answer from Günter Zöchbauer, and it was perfect to me, moving the form creation to a function and calling it from ngOnInit().

For illustration, that's how I made it, including the fields initialization:

ngOnInit() {
    // initializing the form model here
    this.createForm();
}

createForm() {
    let EMAIL_REGEXP = /^[^@]+@([^@\.]+\.)+[^@\.]+$/i; // here just to add something more, useful too

    this.userForm = new FormGroup({
        name: new FormControl('', [Validators.required, Validators.minLength(3)]),
        city: new FormControl(''),
        email: new FormControl(null, Validators.pattern(EMAIL_REGEXP))
    });

    this.initializeFormValues();
}

initializeFormValues() {
    const people = {
        name: '',
        city: 'Rio de Janeiro',  // Only for demonstration
        email: ''
    };
    (<FormGroup>this.userForm).setValue(people, { onlySelf: true });
}

resetForm() {
    this.createForm();
    this.submitted = false;
}

I added a button to the form for a smart reset (with the fields initialization):

In the HTML file (or inline template):

<button type="button" [disabled]="userForm.pristine" (click)="resetForm()">Reset</button>

After loading the form at first time or after clicking the reset button we have the following status:

FORM pristine: true 
FORM valid: false (because I have required a field) 
FORM submitted: false
Name pristine: true
City pristine: true
Email pristine: true

And all the field initializations that a simple form.reset() doesn't make for us! :-)

---

I'm using reactive forms in angular 4 and this approach works for me:

    this.profileEditForm.reset(this.profileEditForm.value);

see reset the form flags in the Fundamentals doc

---

Please use The following format, its working perfectly for me..i have checked lot ways but this works perfectly.<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm"> .... </form>

---

if anybody wants to clear out only a particular form control one can use

formSubmit(){
this.formName.patchValue({
         formControlName:''
          //or if one wants to change formControl to a different value on submit
          formControlName:'form value after submission'     
    });
}

참고URL : https://stackoverflow.com/questions/36655922/resetting-a-form-in-angular-2-after-submit