如何在角度应用程序中维护为一组属性/表单字段键

Question

所以我正在开发一个Angular应用程序，用户将在多个视图中创建一个概要文件。用户将在每个会话中只创建一个配置文件，并通过反应表单字段输入数据。

我正在考虑一个可注射的服务，可以跟踪个人资料的当前状态。然后在每个视图中都有一个formGroup，并且在每个onSubmit上，配置文件信息从formGroup传输到由服务维护的唯一会话实例。

我必须在模型、profile类以及每个视图的不同表单组中重复概要文件字段的名称。因此，在模型Profile类中必须有一个name，在输入名称的View的FormGroup中必须有。我不想每次写入字段或为其创建FormControl时都输入硬编码字符串。我曾想过在外部文件中创建一个枚举，并将其导入不同视图的模型类和组件中。因此：

export enum ProfileFieldsEnum {
NAME = 'name',
EMAIL = 'email'
}

然后会像这样使用：

import { ProfileFieldsEnum } from './profile-fields-keys';
export class Profile {
private profileFieldsKeys = Object.keys(ProfileFieldsEnum).filter(k => typeof ProfileFieldsEnum[k as any] === 'number');
private profileFieldsValues = new Set(this.profileFieldsKeys.map(k => ProfileFieldsEnum[k as any]));
constructor() {}
setProperty(key: string, value: any) {
if (this.profileFieldsValues.has(key)) {
this[key] = value;
}
}
getProperty(key: string): any {
return this.profileFieldsValues[key];
}
}

在模型类中，如下所示：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { LoggerService } from 'src/app/services/logger.service';
import { Profile } from 'src/app/model/profile';
import { ProfileFieldsEnum } from 'src/app/model/profile-fields-keys';    
@Component({
selector: 'profile-search',
templateUrl: './profile-name.component.html',
styleUrls: ['./profile-name.component.scss']
})
export class ProfileNameComponent implements OnInit {
constructor(
private fb: FormBuilder,
private logger: LoggerService
) {}
ngOnInit() {
this.profileParentForm = this.fb.group({
name: ['', Validators.required]    // Here I'd like to use ProfileFieldsEnum.NAME instead of 'name'
});
this.profileParentForm.valueChanges.subscribe(form => 
this.logger.log(form));
}
}

我还没有写onSubmit代码。

所以我想我不是第一个遇到这种情况的人。你们做了什么？你会怎么做？请随意评论我的任何想法，我觉得我有点拘泥于细节，错过了一些大局。必须有一种更容易/更简单的方法来做到这一点。

Answer 1

是的，您的代码可以简化为-

配置文件

让我们重构您的配置文件类。到目前为止，它会进行添加过程，分别保存密钥和值的记录，但它可能会更改为-

import { ProfileFieldsEnum } from './profile-fields-keys';
export class Profile {
private profile = {}; // it will add the property and value dynamically
constructor() {}
setProperty(key: string, value: any) {
this.profile[key] = value; //set the property value, create new one if doesn't exist
}
getProperty(key: string): any {
return this.profile[key];
}
}

配置文件名称组件

如果不想硬编码属性名称，那么是的，您可以使用枚举来实现这一点。

ngOnInit() {
this.profileParentForm = this.fb.group({
[ProfileFieldsEnum.NAME]: ['', Validators.required] //<-- enum is used for control name
});
this.profileParentForm.valueChanges.subscribe(form => 
this.logger.log(form));
}