如何从 class 创建地图以将其属性提取为值？

Question

我想在 Angular 模板和 FormGroup 之间创建一个更强大的类型安全 link。我想到了以下内容，但我不知道如何在 TypeScript 中正确表达它。

我想用一个对象来设置一个FormGroup的controls对象的键（第一个参数FormControl 构造函数）， 以及模板中 formControlName 的绑定，从模型 class.[=16= 开始]

我的理由是，这将删除因对 formControlName 属性使用字符串而产生的“字符串”或所谓的 魔术字符串 API。这样，唯一的真实来源就是模型 class。这也将使我能够轻松地重构 class 并更新所有其他引用。

例如，我希望能够写出这样的东西：

// model class:
class Partner {
  id: string;
  name: string;
}

// some static type SomeType = { id: "id", name: "name" } extends Partner's public properties
// but the values of those properties must equal the property name.

// component:
@Component({
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
      <!-- notice I'm not using a stringy API like formControlName="id" -->
      <input type="text" [formControlName]="SomeType.id">
      <input type="text" [formControlName]="SomeType.name">
    </form>
`})
class CreatePartnerComponent {
  form = new FormGroup({
    SomeType.id: new FormControl(''),
    SomeType.name: new FormControl('')
  });
}

谢谢！

Answer 1

这是避免所谓 magic string 的一个很好的做法。可能的解决方案可能是：

class ModelClass {
    id: string;
    age: number;
}
class MyFormGroup extends FormGroup {
    controls: {
        [key in keyof ModelClass]: AbstractControl;
    };
}
@Component({
    template: `
        <form [formGroup]="form"
              (ngSubmit)="onSubmit()"
              novalidate>
            <input type="text"
                   [formControl]="form.controls.id" />
            <input type="text"
                   [formControlName]="form.controls.age" />
        </form>
    `,
})
class CreatePartnerComponent {
    someEnum = MyFormGroup; // trick to use enum inside the template
    formConfig: { [key in keyof ModelClass]: FormControl } = {
        id: new FormControl(),
        age: new FormControl(),
    };
    form = new FormGroup(this.formConfig) as MyFormGroup;
}

Answer 2

我好像找到了（一个）方法

class ModelClass {
  id: string;
  name: string;
}

// for the template I need a literal object that I can access by key
// and provide form control names as strings to bind the formControlName
// directive to, so I declare this inside the component class:

readonly fcName: { [key in keyof ModelClass]: key } = {
  // the problem with this is you need to explicitly declare the properties here and
  // keep this property up to date when you refactor ModelClass, but you still
  // get an error if you forget to, so that's great.
  // Also some IDEs can auto-fill these properties along with the values as well.
  id: 'id',
  name: 'name'
}

// and bind form controls like [formControlName]="fcName.id" and so on,
// in the template, this should be pretty obvious by now.

// and the form group you now declare like this, which
// enforces correct key names based on the model:

form = new FormGroup({
  id: new FormControl(''),
  name: new FormControl('')
} as { [key in keyof ModelClass]: FormControl });

是否有其他更优雅的方式来做到这一点，也许不需要创建 fcNames（表单控件名称）变量，只是为了在模板中绑定表单控件的正确名称？如果可能的话，我希望消除重复代码。

如何从 class 创建地图以将其属性提取为值？

How do I create a map from a class in order to extract its properties as values?

angular

typescript

angular-reactive-forms

type-safety