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

您应该在输入上使用var users = [ { "USERID": "U0001", "Total_Points": 8 }, { "USERID": "U0004", "Total_Points": 10 }, { "USERID": "U0003", "Total_Points": 1 }, { "USERID": "U0006", "Total_Points": 8 }, { "USERID": "U0002", "Total_Points": 2 }, { "USERID": "U0005", "Total_Points": 1 } ]; users.sort((a, b) => b.Total_Points - a.Total_Points); for (let i = 0; i < users.length; i++) { let totalPoints = users[i].Total_Points; let usersWithRank = users.filter(user => user.Total_Points === totalPoints); for (let user of usersWithRank) { user.Rank = i + 1; } i += usersWithRank.length - 1; } console.log(users);而不是div。但是，如果您坚持在div上使用它，则必须实现formControlName

Answer 2

表单控件用于编辑数据，因此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>

用于div的formControlName

2 个答案: