จะล้างแบบฟอร์มหลังจากส่งใน Angular 2 ได้อย่างไร?


88

ฉันมีองค์ประกอบ 2 เชิงมุมง่ายๆพร้อมเทมเพลต จะล้างแบบฟอร์มและช่องทั้งหมดหลังจากส่งได้อย่างไร?. ฉันโหลดหน้าใหม่ไม่ได้ หลังจากตั้งค่าข้อมูลด้วยdate.setValue('')ฟิลด์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>

คำตอบ:


138

โปรดดูที่https://angular.io/docs/ts/latest/guide/reactive-forms.html (ส่วน "รีเซ็ตค่าสถานะฟอร์ม")

> = RC.6

ใน RC.6 ควรได้รับการสนับสนุนในการอัปเดตรูปแบบฟอร์ม การสร้างกลุ่มฟอร์มใหม่และกำหนดให้myForm

[formGroup]="myForm"

จะได้รับการสนับสนุนด้วย ( https://github.com/angular/angular/pull/11051#issuecomment-243483654 )

> = RC.5

form.reset();

ในโมดูลรูปแบบใหม่ (> = RC.5) NgFormมีreset()วิธีการและยังสนับสนุนresetเหตุการณ์ แบบฟอร์ม https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<= RC.3

สิ่งนี้จะได้ผล:

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

ดูสิ่งนี้ด้วย


2
@ masel.popowo ใช่ถ้าคุณต้องการpristine... การสร้างแบบฟอร์มใหม่ในขณะนี้เป็นทางเลือกเดียว
GünterZöchbauer

@ günter-zöchbauerคุณสร้างแบบฟอร์มใหม่ได้อย่างไร?
SimonHawesome

2
ฉันยังไม่ได้ลองด้วยตัวเอง แต่ฉันเดาว่าคุณเพิ่งทิ้งกลุ่มควบคุมและสร้างกลุ่มใหม่ ย้ายรหัสไปยังฟังก์ชันเพื่อให้คุณสามารถเรียกซ้ำได้หากจำเป็น
GünterZöchbauer

+1 สำหรับ setErrors () โดยวิธีการผิดพลาดที่ฉันบันทึกไว้ที่นี่เป็นข้อผิดพลาดที่ฉันทำในกรณีที่มีคนอื่นทำคล้ายกัน: ในกรณีที่คุณใช้ตัวยึดเช่น 'foo' อย่าเรียก control.updateValue ('foo') แต่ให้เรียก control.setValue (null) แทน
Mike Argyriou

ฉันไม่รู้เกี่ยวกับsetValue()วิธีการควบคุม เฉพาะupdateValue() github.com/angular/angular/blob/master/modules/angular2/src/…
GünterZöchbauer

34

สำหรับ Angular2 RC5 myFormGroup.reset()ดูเหมือนจะทำเคล็ดลับ


สิ่งนี้ใช้งานได้ในเชิงมุม 4 ใช้เพื่อรีเซ็ตการตรวจสอบแบบฟอร์ม
Grim

13

ในการรีเซ็ตแบบฟอร์มของคุณหลังจากส่งแล้วคุณสามารถเรียกthis.form.reset()ใช้ได้ โดยการเรียกreset()มันจะ:

  1. ทำเครื่องหมายการควบคุมและส่วนควบคุมเด็กว่าเป็นแบบดั้งเดิมที่เก่าแก่
  2. ทำเครื่องหมายการควบคุมและส่วนควบคุมเด็กว่าไม่มีการแตะต้องแตะต้อง
  3. ตั้งค่าการควบคุมและการควบคุมลูกเป็นค่าที่กำหนดเองหรือค่าว่าง null
  4. อัปเดตค่า / ความถูกต้อง / ข้อผิดพลาดของฝ่ายที่ได้รับผลกระทบ

โปรดค้นหาคำขอดึงนี้เพื่อดูคำตอบโดยละเอียด FYI PR นี้ได้รวมเป็น 2.0.0 แล้ว

หวังว่านี่จะเป็นประโยชน์และแจ้งให้เราทราบหากคุณมีคำถามอื่น ๆ เกี่ยวกับ Angular2 Forms


1
หากฉันใช้การรีเซ็ตการตรวจสอบความถูกต้องจะไม่ถูกนำไปใช้ฉันจะทำให้ทั้งสองอย่างทำงานได้อย่างไร
ณิชา

11

โทรออกclearForm();ในไฟล์. ts ของคุณ

ลองทำตามตัวอย่างข้อมูลโค้ดด้านล่างเพื่อล้างข้อมูลแบบฟอร์มของคุณ

clearForm() {

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

9
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();
    }
}

@ สิ่งนี้ใช้ได้ดีเมื่อเราต้องเคลียร์ฟิลด์ทั้งหมด แต่เราจะใช้สิ่งเดียวกันนี้เพื่อล้างเฉพาะบางช่องได้อย่างไร
Akhilesh Pothuri

9

นี่คือวิธีที่ฉันทำใน 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) ;
    });
}

ไม่จำเป็นต้องโทร form.clearValidators()


2
นั่นเป็นวิธีที่ดีที่สุด (และใช้ได้ผลสำหรับฉันเท่านั้น) ในการล้างแบบฟอร์มที่สร้างด้วย FormBuilder ที่มีการควบคุมด้วยตัวตรวจสอบความถูกต้อง
mmied

8

นี่คือวิธีที่ฉันทำ Angular 8:

รับข้อมูลอ้างอิงในท้องถิ่นของแบบฟอร์มของคุณ:

<form name="myForm" #myForm="ngForm"></form>
@ViewChild('myForm', {static: false}) myForm: NgForm;

และเมื่อใดก็ตามที่คุณต้องการรีเซ็ตแบบฟอร์มresetFormวิธีการโทร:

this.myForm.resetForm();

คุณจะต้องFormsModuleจาก@angular/formsมันในการทำงาน อย่าลืมเพิ่มลงในการนำเข้าโมดูลของคุณ


1
@ViewChildใน Angular 8 ต้องการ 2 อาร์กิวเมนต์ @ViewChild('myForm', {static: false}) myForm: NgForm;
Tanzeel

6

ในเชิงมุมเวอร์ชัน 4 คุณสามารถใช้สิ่งนี้:

this.heroForm.reset();

แต่คุณอาจต้องมีค่าเริ่มต้นเช่น:

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

เป็นสิ่งสำคัญในการแก้ไขปัญหา null ในการอ้างอิงวัตถุของคุณ

ลิงก์อ้างอิงค้นหา "รีเซ็ตแฟล็กฟอร์ม"


ขอบคุณมันทำงานให้ฉัน นี่คือสิ่งที่ฉันต้องการ
Dhaval Mistry

3

มีการสนทนาใหม่เกี่ยวกับเรื่องนี้ ( https://github.com/angular/angular/issues/4933 ) จนถึงขณะนี้มีเพียงแฮ็คบางส่วนที่อนุญาตให้ล้างแบบฟอร์มเช่นสร้างแบบฟอร์มใหม่หลังจากส่ง: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/


1
และในที่สุดเราก็มีวิธีการทำอย่างถูกวิธี: github.com/angular/angular/pull/9974
wawka

1

ฉันพบทางออกอื่น มันค่อนข้างแฮ็ค แต่มีอยู่ทั่วไปในโลก angular2

เนื่องจากคำสั่ง * ngIf จะลบฟอร์มและสร้างขึ้นใหม่เราสามารถเพิ่ม * ngIf ในฟอร์มและผูกเข้ากับformSuccessfullySentตัวแปรบางประเภทได้ => สิ่งนี้จะสร้างฟอร์มขึ้นใหม่และรีเซ็ตสถานะการควบคุมอินพุต

แน่นอนคุณต้องล้างตัวแปรโมเดลด้วย ฉันพบว่าสะดวกที่จะมีคลาสโมเดลเฉพาะสำหรับฟิลด์ฟอร์มของฉัน ด้วยวิธีนี้ฉันสามารถรีเซ็ตฟิลด์ทั้งหมดได้ง่ายๆเพียงแค่สร้างอินสแตนซ์ใหม่ของคลาสโมเดลนี้ :)


เพิ่มเติม: ฉันใช้ AngularDart ซึ่งยังไม่มีวิธีรีเซ็ตดังกล่าว หรืออย่างน้อยฉันก็ไม่พบมันในตอนนี้ : D
Benjamin Jesuiter

ด้วย RC.6 เพียงแค่เริ่มต้นใหม่รูปแบบฟอร์มจะทำ หากคุณย้ายการสร้างโมเดลฟอร์มไปยังเมธอดการเรียกใช้เมธอดนี้จะเป็นการรีเซ็ตฟอร์ม
GünterZöchbauer

@ GünterZöchbauerโอ้เยี่ยม! ฉันแทบรอไม่ไหวที่จะมีฟีเจอร์นี้ใน Angular2 สำหรับ Dart ด้วย! :) เนื่องจากแนวทางของฉันเป็นปัญหา: ฉันมีรายการองค์ประกอบอินพุตทั้งหมดในแบบฟอร์มของฉัน ฉันได้รับเหล่านี้ผ่านทางโผพื้นเมืองในquerySelectorAll ngAfterViewInitฉันใช้รายการนี้เพื่อเน้นองค์ประกอบอินพุตถัดไปบน keydown.enter แทนที่จะส่งแบบฟอร์ม รายการนี้จะแตกเมื่อใช้ ngIf เพื่อเริ่มต้นฟอร์มใหม่ :(
Benjamin Jesuiter

ตกลงฉันแก้ไขปัญหาแล้ว ฉันสามารถสอบถามอินสแตนซ์ InputElement ซ้ำได้เมื่อฉันรีเซ็ตรูปแบบฟอร์มของฉัน
Benjamin Jesuiter

0

อืมตอนนี้ (23 มกราคม 2017 ด้วย angular 2.4.3) ฉันทำให้มันเป็นแบบนี้:

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

0

โค้ดด้านล่างใช้ได้กับฉันใน 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()
 }

}

0

this.myForm.reset ();

เท่านี้ก็เพียงพอแล้ว ... คุณจะได้ผลลัพธ์ที่ต้องการ


1
เพิ่มคำอธิบายเพิ่มเติมว่าโค้ดบรรทัดนี้แก้ปัญหาได้อย่างไร
Sfili_81

0

ในการรีเซ็ตแบบฟอร์มที่สมบูรณ์เมื่อส่งคุณสามารถใช้การรีเซ็ต () ใน Angular ตัวอย่างด้านล่างถูกนำไปใช้ใน Angular 8 ด้านล่างนี้เป็นแบบฟอร์มสมัครสมาชิกที่เราใช้อีเมลเป็นข้อมูล

<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>

โปรดดูเอกสารอย่างเป็นทางการ: https://angular.io/guide/forms#show-and-hide-validation-error-messages


-3
resetForm(){
    ObjectName = {};
}

แม้ว่ารหัสนี้อาจตอบคำถามได้ แต่คุณควรเพิ่มคำอธิบายที่ระบุสาเหตุ / วิธีแก้ปัญหา
BDL

มันไม่ได้ตั้งค่าคลาส 'สัมผัส' 'บริสุทธิ์' ฯลฯ ... กลับไปเป็นค่าดั้งเดิม
Pac0

@Shivendra สิ่งนี้อาจใช้ได้ผลกับปัญหาของคุณโดยเฉพาะ แต่ไม่ใช่เรื่องทั่วไป คุณกำลังทำให้คุณobjectว่างเปล่าและไม่ใช่ไฟล์form.
Tanzeel
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.