角度 5，保持输入值并将其添加到 JS 对象答案

【问题标题】：angular 5, Keeping value on inputs and adding it to JS object角度 5，保持输入值并将其添加到 JS 对象
【发布时间】：2018-10-18 16:48:34
【问题描述】：

我正在制作一个 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 的新手，非常感谢您的帮助。

【问题讨论】：

在构建一个包含一组控件的表单时，您可能会想要研究使用反应式表单。这是一个很好的教程：alligator.io/angular/reactive-forms-formarray-dynamic-fields。回来时提供一个指向最小堆叠闪电战的链接，以帮助人们帮助您
嘿，我仍在查看您发送的链接，但我的错，这里是 stackblitz！ stackblitz.com/edit/…
感谢闪电战链接，虽然我仍然不确定你想要实现什么。当您在输入上按 Enter 键时，一个新项目被添加到数组中，并且由于该数组用于动态创建表单，您会得到一个新表单集，底部添加了一个空输入 - 您正在输入的输入里面还有输入的值吗？
非常感谢！借助您的链接和互联网上的其他文本，我找到了解决问题的方法。非常感谢！！

标签： input output angular5 ngfor ngmodel

【解决方案1】：

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

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

其次，我在调用它们时遇到了麻烦，看了很多，我发现我可以用括号[]调用一个Json的参数。

"form.value['nameType' + this.i]" -- 我需要这样的东西。

【讨论】：