角度4 ng模型形式绑定

Question

我有一个表单来编辑客户。 表单是动态的，因为用户可以创建和订购字段。

我第一次打电话给我表格的模板，我需要将客户的价值绑定到它。

这是我的代码：

<form (ngSubmit)="saveCustomer($event); $event.preventDefault()">
<div class="row">
    <div class="col-sm-12 pb10">
        <h2>{{customerMapped?.name}}</h2>
        <span>{{customerMapped?.street}}</span><br/>
        <span>{{customerMapped?.zip}} {{customerMapped?.city}}</span>
    </div>
    <div class="col-sm-12" *ngFor="let section of template?.sections">
        <h3 class="bordered-top pt10">{{section.displayName}}</h3>
        <div class="row">
            <div class="col-sm-6" *ngFor="let attribute of section?.attributes">
                <div class="form-group">
                    <label for="code">{{attribute.displayName}}</label>
                    <input type="text" class="form-control" id="{{attribute.name}}"
                    name="customerMapped[attribute.name]"
                    [ngModel]="customerMapped[attribute.name]"
                    (ngModelChange)="customerMapped[attribute.name] = $event"
                    />
                </div>
            </div>
        </div>
    </div>
</div>

如果我在saveCustomer方法中执行console.log（this.customerMapped），它会向我显示正确的数据，当我更改输入值时，它会更改customerMapped值。

这对任何人都响了吗？ ： - ）

修改

输入现在已经填充但是它们填充了错误的值，就像绑定不关心我的[attribute.name]动态名称一样：

最后编辑

要使其发挥作用，我必须这样做：

<label for="code">{{attribute.displayName}}</label>
<input type="text" class="form-control" id="{{attribute.name}}" name="{{attribute.name}}" 
[ngModel]="customerMapped[attribute.name]"
(ngModelChange)="customerMapped[attribute.name] = $event"/>

并重新组织我的对象，以便从根级别获取属性的所有值。

Answer 1

ngModel应放在方括号中

 <input type="text" class="form-control" id="{{attribute.name}}"
        name="customerMapped[attribute.name]"
        [ngModel]="customerMapped[attribute.name]"
        (ngModelChange)="customerMapped[attribute.name] = $event"/>