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

Question

我知道这听起来超级简单，但我无法让它发挥作用。我知道我必须使用 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 template/view中的值，如下所示：

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

    {{seedForm.controls.varietyName.value}}

</div>

Answer 2

你好，你必须在父标签上写 formGroup 并初始化你的表单检查这个 StackBlitz

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

How do i display the value of a form control in the html view?

angular

angular-forms