时间戳

首页 > 解决方案 > 用于 div 的 formControlName

angular - 用于 div 的 formControlName

问题描述

这是我的反应形式对象

    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'

标签： angular

解决方案

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

您还可以创建自己的自定义组件（或指令），这些组件（或指令）可以绑定到表单控件——如果它们实现了ControlValueAccessor接口。Angular 内置了 , 等的实现ControlValueAccessor，但没有.<input><textarea><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>

推荐阅读