angular 5、保留输入值并将其添加到JS对象

Question

我正在 angular 5 中制作一个网络工具来帮助创建新的 XML。

我在传递输入值并将它们同时保存在同一输入中时遇到问题。

我有一个带有 ngSubmit 事件的表单，它使用 ngForm 的引用作为参数

<form class="form-group" (ngSubmit)="createSimpleTypeList(f)" #f="ngForm" >
    <div class="container">
        <div class="row">
            <div class="col-sm-12" >
                <button class="btn btn-danger flex ">Construir Json!</button>
            </div>
        </div>
    </div>
    <hr>

    <div class="container" *ngFor="let type of objSimpleType;let i =index">
        <hr>
        <div class="row">
            <div class="col-sm-3">
                <input type="text" [(ngModel)]="type.name" name="nameType"/> 
                <br>
                Inserte el nombre del tipo:     
            </div>
            <div class="col-sm-3">
                <input type="text"    [(ngModel)]="type.type"   name="type"/> 
                <br>
                Inserte el tipo:    
            </div>

            <div class="col-sm-2">
                <input type="number"  [(ngModel)]="type.min"  name="min"/> 
                <br>
                Inserte minimo: 
            </div>
            <div class="col-sm-2">
                <input type="number"  [(ngModel)]="type.max" name="max"/> 
                <br>
                Inserte maximo: 
            </div>
            <div class="col-sm-2">
                <input type="checkbox" name="number" />   Numero?
            </div>
        </div>  
    </div>
    <hr>
</form>

这是 createSimpleTypeList 方法

console.log(form.value.nameType);
this.objSimpleType.push({
    '-name': form.value.nameType,
    'xsd:restriction': {
        '-base': form.value.type,
        'xsd:minLength': {
            '-value': form.value.min
        },
        'xsd:maxLenght': {
            '-value': form.value.max
        }
    }
});
this.typeList.emit(form.value.nameType);
this.sharedNameSpace.emit(this.namespace);

我遇到的问题是我没有找到一种方法将新项目推送到 objSimpleType 中，而不删除输入的值，如果我设法不删除输入的值，那么表单的值不会推。

这是它的样子。how the inputs work right now

这就是我需要的

How the inputs should be 我对 angular 还是个新手，非常感谢您的帮助。

Answer 1

既然我已经找到了解决方案，我在上面的代码中有两个错误。

首先我的逻辑没有很好地执行，我需要使用唯一的ID，并动态调用它们。

其次，我在调用它们时遇到了麻烦，看了很多之后，我发现我可以用括号[].

调用Json的参数

"form.value['nameType' + this.i]" -- 这就是我需要的。

angular 5、保留输入值并将其添加到JS对象

angular 5, Keeping value on inputs and adding it to JS object

input

output

ngfor

ngmodel

angular5