从表单 Angular 6 中将值设置到 map<object, string> 中

Question

我将键和值从表单设置到映射中，如果该字段不为空，我将对每个字段进行验证。我正在寻找更好的解决方案...让我的代码更干净，因为我有超过 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>

Answer 1

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 上不为 null 的属性对吗？因此过滤器将每个名称命名为 "a"（在第一次迭代时实际上是 'value1'）并检查是否 form.value[a] !== null。过滤器工作如果 return 为真，则该元素通过，如果失败，则从数组中拼接元素。

现在您只有 form.value[key] 不为空的键。所以为每个做一个并从 form.value[key] 值设置你想要的地图对象。

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

从表单 Angular 6 中将值设置到 map<object, string> 中

Set values into a map<object, string> from form Angular 6

html

forms

fieldset

typescript

angular