Angular 在角度应用程序中，如何将属性/表单字段键保持为单个集合？

因此，我正在开发一个角度应用程序，用户将在多个视图中创建一个纵断面。用户将在每个会话中只创建一个配置文件，并通过反应式表单字段输入数据

我正在考虑一种跟踪配置文件当前状态的可注入服务。然后在每个视图中都有一个formGroup，在每个

onSubmit

上，配置文件信息从formGroup传输到由服务维护的唯一会话实例

对于每个视图，我必须在模型、profile类和不同的表单组中重复profile字段的名称。因此，在模型配置文件类中必须有一个

名称

，在输入名称的视图的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));
  }
}

我还没有在Submit上编写

code

code

---

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

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

轮廓 让我们重构您的profile类。到目前为止，它还没有添加过程来分别保存键和值的记录，但可以根据需要进行更改-

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];
    }
}

ProfileNameComponent 如果不想硬编码属性名称，那么可以使用枚举来实现

  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));
  }

ngOnInit（）{
this.profileParentForm=this.fb.group({
[ProfileFieldsEnum.NAME]：[''，验证程序。必需]//
this.logger.log（form））；
}

如果我错了，请纠正我。如果我总结了您的问题，您需要创建一个profile FormGroup，而不是在多个组件中编写相同的代码？