Question

我正在尝试在span标签而不是input标签中显示表单控件。所以我尝试了以下一个

<div formArrayName="genes">
    <table>
        <thead>
            <tr>
                <th>Position</th>
            </tr>
        </thead>
        <tbody *ngFor="let gene of genesControls.controls; let i = index" [formGroupName]="i">
            <td>
                <span>
                {{gene.position}} //not working
                {{position}} //not working
                {{gene.position.value}} //not working
                {{position.value}} //not working
                </span>

                <!--input formControlName="position" id="pos"> This is working-->
            </td>
        </tbody>
    </table>
</div>

当我尝试在输入标签内运行时，但使用span或其他标签时，则不起作用，我不知道这里发生了什么。根据文档，我也尝试使用值，但是出了点问题。我该如何解决这个问题？

Answer 1

从您的代码中可以看到，gene本身就是一个复合控件。因此，要访问每个内部控件的值，您需要获取值，例如gene.controls.position.value。

因此，代码如下：

<div formArrayName="genes">
    <table>
        <thead>
            <tr>
                <th>Position</th>
            </tr>
        </thead>
        <tbody *ngFor="let gene of genesControls.controls; let i = index" [formGroupName]="i">
            <td>
                <span>{{gene.controls.position.value}}</span>

                <!--input formControlName="position" id="pos"> This is working-->
            </td>
        </tbody>
    </table>
</div>

另一种选择是使用gene.value.position

=== 某些背景 ===

在这种情况下，行为没有实际差异。尽管它的工作方式不同。因此，每种形式（FormGroup或FormArray）以及每种FormControl都扩展了具有AbstractControl属性的value类。

类型FormGroup和FormArray的元素还具有属性controls，代表一组所有内部控件。

对于FormGroup，它看起来像这样：[key: string]: AbstractControl

对于FormArray，它看起来像这样：AbstractControl[]

当您访问深度嵌套形式（value）的form.value属性时，它将为您提供所有value组合在单个对象中的所有内容。

如Angular文档所述value是：

控件的当前值。对于FormControl，为当前值。对于FormGroup，已启用控件的值作为对象，具有组中每个成员的键/值对。对于FormArray，启用的控件的值作为数组。

如果您有一个深层嵌套的表单，则知道可以通过form.value访问整个表单值。这将是一个简单的js对象。

对于基本上是FormGroup的复合控件，您可以访问controls属性，然后获取单个控件的值。

Answer 2

如果要访问它们的值，可以通过以下方式访问它：

     <tbody *ngFor="let gene of genesControls.controls; let i = index" [formGroupName]="i">
        <td>
            <span>{{gene.value.position}}</span>

            <!--input formControlName="position" id="pos"> This is working-->
        </td>
    </tbody>

如何在Angular 6中显示表单控件值？

2 个答案: