如何使用 Angular 中的接口创建表单组答案

【问题标题】：How to create a Formgroup using an interface in Angular如何使用 Angular 中的接口创建表单组
【发布时间】：2023-02-03 03:13:42
【问题描述】：

我刚开始提问，所以请谅解。我有用户界面

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

我想创建一个 formbuilder，它（如果可能）会自动生成所需的属性。例如

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

有什么办法可以发生这种情况吗？我想创建更大的界面，我不想手动放置必要的属性

【问题讨论】：

创建表单生成器是什么意思？角度已经有一个formbuilder。你想做一些你自己的东西，比如 formbuilder 吗？仅通过将接口传递给它就可以工作？

标签： javascript angular dynamic

【解决方案1】：

这是Angular中的一个open question，以后会默认实现的方式。现在我们可以做的来验证表单是：

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

使用此实现，当界面和表单不匹配时，它至少会抛出一个错误。好！

【讨论】：

您好，感谢您的回复，这还没有实现真是太可惜了，但感谢您的验证。我使用 ngFor 函数创建了一个表单，该函数读取某些属性的数量并创建相同数量的表单。我现在想创建一个 fb.group 可能有一个板来匹配每个表单与边界中的一个位置。 :)

【解决方案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 中使用类型化表单的最佳方式，如果我错了请纠正我。

【讨论】：