代码之家 › 专栏 › 技术社区 › mkHun

如何以角度6显示表单控件值?

angular

mkHun · 技术社区 · 6 年前

我试图在span标记而不是输入标记中显示表单控件。所以我试过下面的那个

<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>

当我在输入标记内尝试时,它正在工作,但使用范围或其他标记时它不工作,我不知道这里发生了什么,根据文档,我也尝试使用值,但出现了问题。我怎么修这个?

2 回复 | 直到 6 年前

KShewengger 6 年前

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

     <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>

Daniil Andreyevich Baunov 6 年前

正如我从你的代码中看到的, 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 财产。

类型元素 形式群 和 表格阵列 也有财产 controls ,表示一组所有内部控件。

为了 窗体组 看起来是这样的: [key: string]: AbstractControl

为了 表格阵列 看起来是这样的: AbstractControl[]

当你进入 价值 深嵌套窗体的属性( form.value ,它给了你 价值 把所有的东西组合在一个物体里。

正如Angular Doc所描述的 价值 是:

控件的当前值。对于FormControl,为当前值。对于FormGroup,作为对象的已启用控件的值,该对象的每个成员都有一个键值对。对于formaray,作为数组的已启用控件的值。

如果您有一个深度嵌套的表单,那么您知道可以通过以下方式访问整个表单值: 价值 . 这将是一个简单的JS对象。

对于基本上是 形式群 S,您可以访问 控制 属性,然后获取单个控件的值。