Question

我的预期结果是在提交表单后重置表单，并将其默认值绑定到formGroup控件。我通过调用表单提交上的reset（）提交后，尝试将表单重置为其默认数据。请告诉我如何重置日期和时间字段中的默认值。

示例：

pickupDate = new Date().toISOString().slice(0,10);
pickupTime = moment().format() ;

onSubmit(orderData: Order){
        this.apiService(orderData).subscribe( order => {
                 orderForm.reset()
})
}

请帮忙谢谢

Answer 1

提交表单后。你在打电话

this.yourForm.reset()

然后你可以将初始值修改为这样的表格。

this.yourForm.patchValue({
  firstControllerName: this.initialValues.value1,
  secondControllerName: this.initialValues.value2,
  // other controller names goes here
});

希望这有帮助。

Answer 2

我不知道你的formBuilder是怎样的，但是

this.yourForm.reset（{}）已经完成了清空未预定字段的技巧。你可以尝试类似的东西......

  ngOnChanges() {
    this.queryForm.reset({
    });

    // We generate an empty form again. 
    this.createForm();
  }

你的createForm看起来像这样......

createForm() {

    // As the method name suggests, we create a form. A form consists of Groups, Controls - and optionally - Arrays...
    this.queryForm = new FormGroup({
      query: new FormControl(''),

      formArray: new FormArray([this.initQueryConditions())
    })
  }

Answer 3

清算方法取决于您使用的是模板驱动表格还是反应表格。

Angular Forms, check full syntax with explaination

如果是模板，则需要将模型对象设置为默认值（不一定为空）。如果是被动的，那么调用一个明确清空每个形式值的方法。

之后，执行form.Reset将其移回“pristine | unchanged”状态，从而删除验证器

Answer 4

您可以像这样同时重置并设置所需的默认值：

    defaultFormValues: any = {
        date: Date.now
    };

    formG: FormGroup = new FormGroup({
        'date': new FormControl(this.defaultFormValues.date)
    });

    onSubmit(orderData: Order) {
        this.apiService(orderData).subscribe(order => {
            this.formG.reset(this.defaultFormValues);
        });
    }

如何重置角形式并在提交后设置默认值

4 个答案: