angular - 如何在 html View 中显示表单控件的值？

Question

我知道这听起来 super 简单，但我无法让它发挥作用。我知道我必须使用 mustache 标签来显示它，但是当我在表单字段中键入内容时它不会显示。这是我的代码:

<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 模板/ View 中显示值，如下所示:

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

    {{seedForm.controls.varietyName.value}}

</div>