Question

您好，我需要有关反应性表格元素的帮助。基本上，这是必需的元素。首次加载视图时，该元素不是红色（不显示需要一个值的错误）。很好，只有当我在里面轻按然后导航而没有填写时，它才会显示红色。我目前的逻辑是填写表单并提交表单时…表单数据被提交，但我保留在同一页面上，但先前的所有值都被清除了。问题是...现在，表单元素认为我没有填写表单，并且在抱怨什么时候不应该抱怨，因为从技术上讲，这是一个新表单。

这是我的表单组：

this.transactionForm = fb.group({
      'billNumber': [null, Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9\\-_]*$'), Validators.maxLength(30)])],
      'birthdate': [null, Validators.required],
      'transactionDate': [new Date(), Validators.required],
      'type': ['Sales', Validators.required],
    });

当前，我有一个名为reset（）的函数，该函数在提交表单时调用：

reset() {
    this.transactionForm.get('billNumber').setErrors({required: false});
    this.transactionForm.controls['billNumber'].setValue('');
    this.transactionForm.controls['billNumber'].setErrors({'incorrect': false});
    this.transactionForm.controls['billNumber'].markAsUntouched();
    this.transactionForm.controls['billNumber'].markAsPristine();
    this.transactionForm.controls['birthdate'].setValue(null);
    this.transactionForm.controls['birthdate'].markAsUntouched();
    this.transactionForm.controls['birthdate'].markAsPristine();
    this.transactionForm.controls['birthdate'].setErrors({'incorrect': false});
    this.transactionForm.controls['transactionDate'].setValue(new Date());
    this.transactionForm.controls['type'].setValue('Sales');
    this.transactionForm.clearValidators();
  }

更容易将type和transactionDate重置为默认值，但是我不确定上面的生日或账单号怎么办。我尝试了上面的代码，但是在重置时，控件仍然是红色的（并且无效）..它应该处于新的/原始状态。我怎样才能解决这个问题？

Answer 1

使用reset('')并通过pristine将整个表单组设置为markAsPristine()应该可以解决问题

Answer 2

https://docs.microsoft.com/en-us/python/azure/?view=azure-python

重置FormGroup，将所有后代标记为原始且未修改，并将所有后代的值设置为空。

this.transactionForm.reset();

或者如果您想从中传递值，就像在表单重置后使用setValue方法一样；

this.transactionForm.reset({contriolName01:'value..',controlName02:'value..'});

设置无效触摸样式

.ng-invalid.ng-touched {
  border-color: red;
}

Reset method

Answer 3

以上答案均不适合我，因此我意识到它必须对表单组控件使用实体元素进行某些操作。

我发现了这个错误：https://github.com/angular/material2/issues/4190

添加类似这样的内容对我来说是固定的：

@ViewChild(FormGroupDirective) myForm;

sendDataToBackendAndResetForm() {
  // TODO: send data to backend
  if (this.myForm) {
    this.myForm.resetForm();
  }
}

Answer 4

以Angular复制的步骤

Step＃0

myFormGroup:formGroup

步骤1

将type="reset"添加到按钮

<button type="reset" (click)="onClickClear()">Clear </button>

步骤2

onClickClear(){
    myFormGroup.reset()   
}

#step 1很重要，否则所有表单验证器都将无效

如何重置反应性表单控件为原始状态？

4 个答案: