Angular 反应形式：将值绑定到 formcontrolname

Question

我无法在我的输出中获得价值。 这是我的动态表单的一部分

<div [formGroupName]="i">
<div formArrayName="projects">
    <div *ngFor="let project of comp.get('projects').controls; let j=index">
        <div [formGroupName]="j">
            <div class="row">
                <div class="col-4">
                    <div class="form-group row">
                        <label for="inputPassword" class="col-6 col-form-label">
                            <b>{{comp.value.serviceItemName}} {{j}}</b>
                        </label>
                        <div class="col-6">
                            <!-- <input type="password" class="form-control" id="inputPassword" placeholder="Password"> -->
                            <input formControlName="count" type="number" class="form-control"
                                placeholder="Add {{comp.value.serviceItemName}}" />
                            <input formControlName="subling_flag" type="number" [value]="j" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

使用 ngfor 中的索引自动设置该值。我无法将值作为输出。但是如果我改变它，输出中的值就在那里。

这是我的数据输出结构

   {
    "serviceId": 1,
    "service_item_id": 987654,
    "serviceItemName": "test demo",
    "checkListId": "1736",
    "projects": [
        {
            "count": "",
            "subling_flag": ""
        }
    ]
}

下面是我的输入框

<input formControlName="subling_flag" type="number" [value]="j" class="form-control" />

我希望我的输出结构是

{
    "serviceId": 1,
    "service_item_id": 987654,
    "serviceItemName": "test demo",
    "checkListId": "1736",
    "projects": [
        {
            "count": "1111",
            "subling_flag": "1"
        },{
            "count": "2222",
            "subling_flag": "2"
        }
    ]
}

Answer 1

试试这个：

<input formControlName="subling_flag" type="number" value="{{ j }}" class="form-control" />

希望对您有所帮助。干杯

这是来自 stackblitz 的工作示例

https://stackblitz.com/edit/angular-cbqtmj