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>

Answer 2

您好，您必须在父标记上编写formGroup，还要初始化您的表单，请检查此 StackBlitz

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

2 个答案: