Question

我在反应式Anguar表单上工作，我需要在保存之前禁用表单控件，并在保存后重置表单并启用它

我遇到了一个问题，因为启用表单触发表单验证，我需要启用表单而不触发验证

我的提交功能

 onSubmit(){
    debugger
    if(this.addForm.valid){
      this.addForm.disable();
      this.showFooter=true;
      this.showFooterSave=false;
    }
  }

保存后功能

resetForm(){
       this.addForm.reset();
       this.addForm.enable();
}

Answer 1

也许您可以尝试使用此代码

this.addForm.reset();
this.addForm.markAsPristine();
this.addForm.markAsUntouched();
this.addForm.enable();

Answer 2

我也遇到了这个问题，只是添加了这一行：

  this.formControl.markAsUntouched();

Answer 3

因此，让我们想象一下这是您的表单标记

<form [formGroup]="formGroup] (ngSubmit)="submit()">
  <!-- Here we set a fieldset -->
  <fieldset [disabled]="submitting">
    <input type="text" formControlName="name">
    <input type="text" formControlName="wish">

    <button type="submit">Submit</button>
  <fieldset>
</form>

还有一个组件。

...
submitting = false;

...

submit() {
  this.submitting = true;

  this.myService.submitForm(this.formGroup.value).subscribe(
  () => {
    console.log('Hooray the form was submitted!');
    this.submitting = false;
  },
  error => {
    console.error(error);
    this.submitting = false;
  }
  );
}
...

禁用的字段集禁止用户与包含按钮的表单控件进行交互。另外，您可以制作

if (this.submitting) {
  return;
}

在这种情况下，如果用户以某种方式克服并再次按下了提交，则在提交功能开始时（在这种情况下，formGroup无关紧要，因为它的值已经被读取并发送到服务器了，所以没有害处）。 / p>

需要启用反应形式而不触发验证

3 个答案: