时间戳

首页 > 解决方案 > 角度 5，保持输入值并将其添加到 JS 对象

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

问题描述

我正在用 Angular 5 制作一个 Web 工具，以帮助创建新的 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 中，而不擦除输入的值，如果我设法不擦除输入的值，那么表单的值将不会推送。

这就是它的外观。输入现在如何工作

这就是我需要的

输入应该如何 我仍然是角度的新手，我非常感谢您的帮助。

标签： inputoutputangular5ngforngmodel

解决方案

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

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

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

“form.value['nameType' + this.i]”——我需要这样的东西。

推荐阅读