如何保持无功输入的默认值

Question

我正在制作一个反应式表单，其中填充了我的数据库中的默认值。因此用户可以随意修改一些数据然后发回表单。 但如果他选择不更改某些字段，我希望能够在发送表单时获得默认值。 但是当我尝试显示此类字段的值时，出现未定义的错误。

我尝试在创建时将默认值直接放入 formControl 中，在模板中的 [value] 属性中显示该值。

我无法准确地向您展示我正在做什么，因为这又是我公司的政策，但这里有一个伪代码

 form_control: new FormControl({ value: myValue, disabled: false }, [Validators.required]);

在模板中：

<input matInput placeholder="myPlaceHolder" formControlName="form_control" id="form">

我希望在我的输入中看到我的默认值，并且即使我没有触及该字段也能够获得该值。输入中没有显示任何内容，当我尝试在控制台中显示输入的值时，我收到一条未定义的消息。

谢谢你帮助我！

Answer 1

您可以将表单控件设置为空字符串，然后使用 setValue() 或 patchValue() 来设置输入的值。如果用户想要编辑默认值，他们可以。他们未编辑的输入仍将传递到表单中

sampleForm= new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', Validators.required),
});


this.sampleForm.patchValue({
    firstName: this.sample.firstName,
    lastName: this.sample.lastName,
});

Answer 2

可以使用

formBuilderConfig.propsConfig

的

@rxweb/reactive-form-validators

来动态设置formControl的默认值。通过使用它，即使您没有触及该字段，您也可以获得默认值。

您只需导入 RxFormBuilder 和 FormBuilderConfiguration 即可。

import { RxFormBuilder,FormBuilderConfiguration } from '@rxweb/reactive-form-validators';

然后像这样设置 propsConfig ：

ngOnInit() {
      let user = new User();

       var formBuilderConfig = new FormBuilderConfiguration();
        formBuilderConfig.propsConfig = {'emailAddress':{defaultValue:"[email protected]"}}
         this.userFormGroup = this.formBuilder.formGroup(user,formBuilderConfig);
    }

工作Stackblitz

Answer 3

您可以使用 YourForm.setValue() （如果您想更改一个或多个控件的值）；或 patchValue() （如果您想更改 n 个控件的值，并且您不希望某些控件变为未定义时任何内容都会中断），以便在初始化时分配值。

注意：如果要处理多个 formControl，最好使用 patchValue。

Answer 4

最简单的方法是在从数据库获取默认数据时直接将值修补到表单输入中。 为此，请在接收数据库数据的位置内为每个输入添加以下代码。

this.formName.get('input_name').patchValue(value from DB Here);

这应该可以正常工作