角度6读取空输入值

Question

我正在通过HttpClient从PHP服务器获取一个值为6的值，并将该值发送到formControlInput并将其设置为默认值：

<mat-form-field color="warn">
    <input matInput formControlName="unit_type" 
    placeholder="Unit type" value="{{unit_type}}">
</mat-form-field>

我正在将相同的值保存到变量中，以将其与输入值进行比较，以便可以检测到更改，知道是否激活了更新按钮：

this.unit_type = data['unit_info'][0]['unit_type'];

使该变量正常显示，并在输入内部显示该值。

现在，当我再次获得它的值时，如下所示：

unit_type_upd = this.formGroup.controls['unit_type'].value;
console.log(unit_type_upd);

它向我显示空值，但是当我更改它时，它将检测到该变化并进行比较过程。

为什么unit_type_upd在组件加载时没有获得显示在输入中的值？

Answer 1

使用Angular Reactive Form时，请勿将数据绑定到诸如以下的属性

value="{{unit_type}}"

正确的方法是在您的组件中

this.formGroup.controls['unit_type'].setValue(this.unit_type)

像这样创建FormControl时可以设置默认值

new FormControl('default value', [Validators.required]);

Answer 2

value属性不应在Angular中使用：它们非常令人困惑。

在您的情况下，您确实设置了默认值：但仅设置了HTML输入itslef的值，没有设置Angular的值！

要修复默认值，必须通过创建表单组来完成：

this.formGroup = this.formBuilder.group({
  unit_type: 'default value here'
});

如果要存储表单的第一个值，请在创建表单后将其存储：

this.defaultValue = this.formGroup.value;

您现在可以使用reset方法将其重置：

this.formGroup.reset(this.defaultValue);

如果要检查值是否已更改，则无需比较两个值；只需检查表格状态！ （dirty或touched，请看最适合您的人

这是您的HTML：

<mat-form-field color="warn">
    <input matInput formControlName="unit_type" placeholder="Unit type">
</mat-form-field>