如何使用 Angular 中的界面创建表单组

Question

我是新来提问的，所以请理解。 我有用户界面

interface USERS {
  id: Number;
  name: String;
  username: String;
  email: String;
}

我想创建一个表单生成器（如果可能的话）将自动生成所需的属性。 例如

registrationForm = this.fb.group({
    userName: ['', [Validators.required, Validators.minLength(3), forbiddenNameValidator]], 
    id: [''], 
    name: [''], 
    email: [''], 

有什么办法可以实现这种情况吗？ 我想创建更大的界面，但我不想手动添加必要的属性

Answer 1

这是 Angular 中的一个开放问题，默认实现它的方式将在未来出现。现在我们可以做的是验证表单：

export type IForm<T> = {
    [K in keyof T]?: any;
}

interface User {
  readonly id: number;
  readonly name: string;
  readonly username: string;
  readonly email: string;
}

var form: IForm<User> = {
    id: [''], 
    name: [''], 
    username: [''], 
    email: [''],
};
this.form = this.fb.group(form);

使用此实现，当接口和表单不匹配时，它至少会抛出一个错误。 致敬！

Answer 2

这就是我在 atm 上输入表单组的方式：

Interface UserAddress {
  address: string
  city: string
  postalCode: string
}

Interface UserForm {
  firstName: FormControl<string>
  lastName: FormControl<string>
  userAddresses: FormControl<UserAddress[]>
}

userForm = new FormGroup<UserForm>({
  firstName: new FormControl('', {validators: [Validators.required]}),
  lastName: new FormControl('', {validators: [Validators.required]}),
  userAddresses: new FormControl([])
})

我认为我不需要解释这一点，我认为这是目前在 Angular 中使用类型化表单的最佳方式，如果我错了，请纠正我。

Answer 3

你应该能够做这样的事情：

import {FormControl} from '@angular/forms';

export interface User {
  firstName: string;
  lastName: string;
  addresses: string[];
}

type ToFormControls<T> = {
  [K in keyof T]: FormControl<T[K]>;
};

export type UserForm = ToFormControls<User>;

const userForm = new FormGroup<UserForm>({
  firstName: new FormControl('', {validators: [Validators.required]}),
  lastName: new FormControl('', {validators: [Validators.required]}),
  addresses: new FormControl([])
});