如何在 html 视图中显示表单控件的值？

Question

我知道这听起来非常简单，但我无法让它发挥作用。我知道我必须使用小胡子标签来显示它，但当我在表单字段中输入内容时它不会显示。这是我的代码：

<label>Variety name: {{seedForm.get('varietyName').value}}</label>

这是实际的表单域：

<mat-form-field>
    <mat-label>Variety name</mat-label>
    <input matInput name="variety" type="text" placeholder="The name of the variety" autofocus
        formControlname="varietyName" required>
</mat-form-field>

这是种子形式的定义：

this.seedForm = fb.group({
  'varietyName' : ['', Validators.required]
})

我不明白为什么这段代码不显示我输入的值。谁能告诉我我做错了什么？

谢谢。

Answer 1

您可以通过 Angular 的字符串插值在 HTML 模板/视图中显示该值，如下所示：

<div>
    <h5> Seed Variety </h5>

    {{seedForm.controls.varietyName.value}}

</div>