从表格 Angular 6,html,angular,forms,typescript,fieldset"/>
时间戳

首页 > 解决方案 > 将值设置到地图中从表格 Angular 6

html - 将值设置到地图中从表格 Angular 6

问题描述

我将键和值设置到表单中的映射中，并且对于每个字段，如果该字段不为空，我将进行验证。我正在寻找更好的解决方案...为了让我的代码更干净，因为我有 10 多个字段...

这是我的 component.ts 文件：

const map = new Map<Object, string>();

    if (this.form.value.value1!= null) {
        map[KEY.VALUE_1] = this.form.value.value1;
    }
    if (this.form.value.value2!= null) {
        map[KEY.VALUE_2] = this.form.value.value2;
    }
    ...

这是我的 component.html 文件：

<div [formGroup]="form">
                <fieldset>
                    <legend>Values</legend>
                        <mat-form-field >
                            <input matInput placeholder="value1" formControlName="value1">
                        </mat-form-field>

                        <mat-form-field>
                            <input matInput placeholder="value2" formControlName="value2">
                        </mat-form-field>
                     ...

                </fieldset>
</div>

标签： htmlangularformstypescriptfieldset

解决方案

Object.keys(form.value).filter(a => form.value[a] !== null).forEach(key => {
    map[key] = form.value[key];
});

Object.keys 获取您的表单值（对象）并将其转换为所有对象属性的数组。所以 Object.keys 将是一个像这样的数组： ['value1', 'value2'] 在你的例子中。

接下来，您只希望 form.value 上不为空的属性是否正确？因此过滤器将每个名称都命名为“a”（第一次迭代时实际上是“value1”）并检查 form.value[a] !== null 是否。过滤器的工作原理是如果返回 true，则该元素通过，如果失败，则从数组中拼接元素。

现在您只有 form.value[key] 不为空的键。因此，为每个执行一个并从该 form.value[key] 值中设置您想要的地图对象。

form.value[key] 和 form.value.key 是一样的，但是因为 key 是动态的，所以你不能这样做。你必须这样写 form.value[key]。

推荐阅读