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

Question

我刚开始提问，请谅解。我有 USERS

界面

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中的一个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);

有了这个实现，它至少会在界面和表单不匹配时抛出一个错误。祝好！

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

How to create a Formgroup using an interface in Angular

javascript

dynamic

angular