Làm thế nào để xóa biểu mẫu sau khi gửi trong Angular 2?

Tôi có một số thành phần góc 2 đơn giản với mẫu. Làm thế nào để xóa biểu mẫu và tất cả các trường sau khi gửi ?. Tôi không thể tải lại trang. Sau khi thiết lập dữ liệu với date.setValue('')trường là không touched.

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control} from 'angular2/common';

@Component({
    selector: 'loading-form',
    templateUrl: 'app/loadings/loading-form.component.html',
    directives: [FORM_DIRECTIVES]
})

export class LoadingFormComponent {
    private form:ControlGroup;
    private date:Control;
    private capacity:Control;

    constructor(private _loadingsService:LoadingsService, fb:FormBuilder) {
        this.date = new Control('', Validators.required);
        this.capacity = new Control('', Validators.required);
        this.form = fb.group({
            'date': this.date,
            'capacity': this.capacity
        });
    }

    onSubmit(value:any):void {
        //send some data to backend
    }
}

loading-form.component.html

<div class="card card-block">
    <h3 class="card-title">Loading form</h3>

    <form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
        <fieldset class="form-group" [class.has-danger]="!date.valid && date.touched">
            <label class="form-control-label" for="dateInput">Date</label>
            <input type="text" class="form-control form-control-danger form-control-success" id="dateInput"
                   min="0" placeholder="Enter loading date"
                   [ngFormControl]="form.controls['date']">
        </fieldset>
        <fieldset class="form-group" [class.has-danger]="!capacity.valid && capacity.touched">
            <label class="form-control-label" for="capacityInput">Capacity</label>
            <input type="number" class="form-control form-control-danger form-control-success" id="capacityInput"
                   placeholder="Enter capacity"
                   [ngFormControl]="form.controls['capacity']">
        </fieldset>
        <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit
        </button>
    </form>
</div>

Xem thêm https://angular.io/docs/ts/latest/guide/reactive-forms.html (phần "đặt lại cờ biểu mẫu")

> = RC.6

Trong RC.6, nó sẽ được hỗ trợ để cập nhật mô hình biểu mẫu. Tạo một nhóm biểu mẫu mới và gán chomyForm

[formGroup]="myForm"

cũng sẽ được hỗ trợ ( https://github.com/angular/angular/pull/11051#issuecomment-243483654 )

> = RC.5

form.reset();

Trong mô-đun biểu mẫu mới (> = RC.5) NgFormcó một reset()phương thức và cũng hỗ trợ một resetsự kiện biểu mẫu . https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<= RC.3

Điều này sẽ hoạt động:

onSubmit(value:any):void {
  //send some data to backend
  for(var name in form.controls) {
    (<Control>form.controls[name]).updateValue('');
    /*(<FormControl>form.controls[name]).updateValue('');*/ this should work in RC4 if `Control` is not working, working same in my case
    form.controls[name].setErrors(null);
  }
}

Xem thêm

• https://github.com/angular/angular/issues/6196
• https://github.com/angular/angular/issues/6169
• https://github.com/angular/angular/issues/4933
• https://github.com/angular/angular/issues/4914
• https://github.com/angular/angular/issues/6371

Đối với Angular2 RC5, myFormGroup.reset()dường như làm được thủ thuật.

Để đặt lại biểu mẫu của bạn sau khi gửi, bạn chỉ cần gọi this.form.reset(). Bằng cách gọi reset()nó sẽ:

1. Đánh dấu điều khiển và điều khiển con là nguyên sơ .
2. Đánh dấu điều khiển và điều khiển con là không được chạm .
3. Đặt giá trị của điều khiển và điều khiển con thành giá trị tùy chỉnh hoặc null .
4. Cập nhật giá trị / hiệu lực / lỗi của các bên bị ảnh hưởng.

Vui lòng tìm yêu cầu kéo này để có câu trả lời chi tiết. FYI, PR này đã được hợp nhất thành 2.0.0.

Hy vọng rằng điều này có thể hữu ích và hãy cho tôi biết nếu bạn có bất kỳ câu hỏi nào khác liên quan đến Biểu mẫu Angular2.

Thực hiện cuộc gọi clearForm();trong tệp .ts của bạn

Hãy thử như đoạn mã mẫu dưới đây để xóa dữ liệu biểu mẫu của bạn.

clearForm() {

this.addContactForm.reset({
      'first_name': '',
      'last_name': '',
      'mobile': '',
      'address': '',
      'city': '',
      'state': '',
      'country': '',
       'zip': ''
     });
}

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
    selector: 'example-app',
    template: '<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
        <input name="first" ngModel required #first="ngModel">
        <input name="last" ngModel>
        <button>Submit</button>
    </form>
    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>',
})
export class SimpleFormComp {
    onSubmit(f: NgForm) {

        // some stuff

        f.resetForm();
    }
}

Đây là cách tôi làm điều đó trong Angular 7.3

// 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) ;
    });
}

Không cần phải gọi form.clearValidators()

Đây là cách tôi thực hiện Angular 8:

Lấy tham chiếu địa phương về biểu mẫu của bạn:

<form name="myForm" #myForm="ngForm"></form>

@ViewChild('myForm', {static: false}) myForm: NgForm;

Và bất cứ khi nào bạn cần đặt lại biểu mẫu, hãy gọi resetFormphương thức:

this.myForm.resetForm();

Bạn sẽ cần FormsModuletừ @angular/formsđể nó hoạt động. Hãy chắc chắn thêm nó vào nhập mô-đun của bạn.

Đối với phiên bản 4 góc, bạn có thể sử dụng:

this.heroForm.reset();

Tuy nhiên, bạn có thể cần một giá trị ban đầu như:

ngOnChanges() {
 this.heroForm.reset({
  name: this.hero.name, //Or '' to empty initial value. 
  address: this.hero.addresses[0] || new Address()
 });
}

Điều quan trọng là phải giải quyết vấn đề null trong tham chiếu đối tượng của bạn.

liên kết tham khảo , Tìm kiếm "đặt lại cờ biểu mẫu".

Có một cuộc thảo luận mới về điều này ( https://github.com/angular/angular/issues/4933 ). Cho đến nay, chỉ có một số bản hack cho phép xóa biểu mẫu, như tạo lại toàn bộ biểu mẫu sau khi gửi: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

Tôi đã tìm thấy một giải pháp khác. Nó hơi hacky nhưng nó được phổ biến rộng rãi trong thế giới angle2.

Vì * ngIf directive loại bỏ biểu mẫu và tạo lại nó, người ta có thể chỉ cần thêm * ngIf vào biểu mẫu và liên kết nó với một số loại formSuccessfullySentbiến. => Thao tác này sẽ tạo lại biểu mẫu và do đó đặt lại các trạng thái kiểm soát đầu vào.

Tất nhiên, bạn cũng phải xóa các biến mô hình. Tôi thấy thuận tiện khi có một lớp mô hình cụ thể cho các trường biểu mẫu của mình. Bằng cách này, tôi có thể đặt lại tất cả các trường đơn giản như tạo một phiên bản mới của lớp mô hình này. :)

Hm, bây giờ (23 tháng 1 năm 2017 với góc 2.4.3) Tôi đã làm cho nó hoạt động như thế này:

newHero() {
    return this.model = new Hero(42, 'APPLIED VALUE', '');
}
<button type="button" class="btn btn-default" (click)="heroForm.resetForm(newHero())">New Hero</button>

Đoạn mã dưới đây phù hợp với tôi trong Angular 4

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class RegisterComponent implements OnInit {
 registerForm: FormGroup; 

 constructor(private formBuilder: FormBuilder) { }   

 ngOnInit() {
    this.registerForm = this.formBuilder.group({
      empname: [''],
      empemail: ['']
    });
 }

 onRegister(){
    //sending data to server using http request
    this.registerForm.reset()
 }

}

this.myForm.reset ();

Như vậy là đủ ... Bạn có thể nhận được đầu ra mong muốn

Để đặt lại biểu mẫu hoàn chỉnh khi gửi, bạn có thể sử dụng reset () trong Angular. Ví dụ dưới đây được triển khai trong Angular 8. Dưới đây là biểu mẫu Đăng ký mà chúng tôi lấy email làm đầu vào.

<form class="form" id="subscribe-form" data-response-message-animation="slide-in-left" #subscribeForm="ngForm"
(ngSubmit)="subscribe(subscribeForm.value); subscribeForm.reset()">
<div class="input-group">
   <input type="email" name="email" id="sub_email" class="form-control rounded-circle-left"
      placeholder="Enter your email" required ngModel #email="ngModel" email>
   <div class="input-group-append">
      <button class="btn btn-rounded btn-dark" type="submit" id="register"
         [disabled]="!subscribeForm.valid">Register</button>
   </div>
</div>
</form>

Tham khảo tài liệu chính thức: https://angular.io/guide/forms#show-and-hide-validation-error-messages .

resetForm(){
    ObjectName = {};
}