用于 div 的 formControlName

Question

这是我的响应式表单对象

    this.form = this.formBuilder.group({
        ordSearch: ['', Validators.required],
        fromDate: ['', Validators.required],
        toDate: ['', Validators.required],
        systemId: ['', Validators.required],
        entityId: ['', Validators.required],
        pmntMethod: ['', Validators.required],
        merchantId: ['', Validators.required],
        ordStatus: ['', Validators.required],
        refNumber: ['', Validators.required],
        ordId: ['', Validators.required],
        orderDate: ['', Validators.required],
        merchId: ['', Validators.required],
        paymentMtd: ['', Validators.required],
        authAmnt: ['', Validators.required],
        accIdentifier: ['', Validators.required],
        capAmnt: ['', Validators.required],
        expDate: ['', Validators.required],
        refAmnt: ['', Validators.required]
    });

这是我的 HTML

<div class="col-md-6 orderKey">Order ID </div>
<div class="col-md-6" formControlName="ordId"></div>

我必须将 ordId 值绑定到 div。 但是formControlName不能用于div。 它给出错误 ERROR 错误：没有名称的表单控件的值访问器：'ordId'

Answer 1

表单控件用于编辑数据，因此 Angular 知道如何将它们与 html 元素一起使用，例如 <input>、<textarea> 或 <select>——用于编辑数据的元素。 <div> 是一个只读元素，通常没有必要将表单控件绑定到它。

您还可以创建自己的自定义组件（或指令），这些组件（或指令）可以绑定到表单控件——如果它们实现了ControlValueAccessor 接口。 Angular 为 <input>、<textarea> 等提供了内置的 ControlValueAccessor 实现，但不适用于 <div>。

但是，在我看来，您不想让用户更改ordId，您只想显示它。因此，它不必成为您表单的一部分。将其存储在一个单独的变量中，并以通常的方式将您的 <div> 绑定到它：

public orderId: number | null = null;

// After you get your response
this.orderId = response.ordId;

<div class="col-md-6 orderKey">Order ID </div>
<div class="col-md-6">{{orderId}}</div>

如果出于某种原因，您绝对希望它出现在您的表单中，您可以像这样绑定到表单控件的值：

<div class="col-md-6 orderKey">Order ID </div>
<div class="col-md-6">{{form.controls.ordId.value}}</div>

Answer 2

您应该在输入而不是 div 上使用formControlName。但是如果你坚持在 div 上使用它，那么你必须实现 ControlValueAccessor