使用默认值重置表单

Question

在我的角度应用程序中，我将 Id 的默认值添加为0。但是当用户重置表单时，它会被清除。

如何重置表单并保留默认值？

这是我的表格：

this.createForm = this.formBuilder.group({
    'Id': new FormControl({ value: 0, disabled: true }, [Validators.required])
});

我尝试这样：

dismissEditPop() {
  this.createForm.reset();
  this.createForm.setValue({ //setting back not working!!
    Id: 0
  });
  this.modalBackdrop = false;
  this.editPopup = false;
  this.deletePopup = false;
  this.addRowData = false;
}

Answer 1

默认情况下.reset()，该方法将表单标记为原始且未受影响，并将其值设置为 null。

要使用另一个值重置它，请传递所需的 formState，如下所示this.formGroup.reset({id: 0}：

文档中提供了更多信息。

Answer 2

在 Angular 14 中，引入了类型化反应表单，并且可以将表单控件声明为不可空（Angular 文档中的示例）：

const email = new FormControl('angularrox@gmail.com', {nonNullable: true});
email.reset();
console.log(email.value); //angularrox@gmail.com

这将导致控件重置为其初始值，而不是null。如果您想{nonNullable: true}为每个控件指定FormGroup，您可以避免使用样板代码，并通过将 a而不是 aNonNullableFormBuilder注入包含表单的组件中来使用 a：NonNullableFormBuilderFormBuilder

export class FormComponent{
   constructor(private fb: NonNullableFormBuilder) {}
   const email = fb.group({
       email: '',
       password: '',
   })
}

或者，您可以调用fb.nonNullable.group({...}), iffb是正常的FormBuilder。