Angular 6 读取空输入值

Question

我正在通过 HttpClient 从 PHP 服务器获取一个值到 angular 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;

您现在可以使用重置方法重置它：

this.formGroup.reset(this.defaultValue);

而且如果你想检查值是否已经改变，你不需要比较两个值；只需检查表格状态！（dirty 或 touched，看哪个最适合你）

这是你的HTML：

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

Angular 6 Reading empty input value