Question

所以，我在TypeScript中有我的Client类，假设我有：

export class Client {
   id: string = '';
   name: string = '';
   email: string = '';
}

现在，每次我想创建一个新客户端时，我都需要一个表单，这就是构建表单的方式：

this.currentClient = new FormGroup({
  id: new FormControl(null, Validators.required),
  name: new FormControl(null, Validators.required),
  email: new FormControl(false)
}

然后我将表单添加到html：

    <form [formGroup]="currentClient" (submit)="submit($event)">
        <div class="form-group">
            <input type="text" formControlName="id" class="form-control" placeholder="Id">
        </div>

        <div class="form-group">
            <input type="text" formControlName="name" class="form-control" placeholder="Name">
        </div>

        <div class="form-group">
            <input type="text" formControlName="email" class="form-control" placeholder="Email">
        </div>

        <button  [disabled]="currentContragent.invalid" class="btn btn-primary" type="submit">Submit</button>

    </form>

很好，但是我有一些非常大的类，其中包含30多个字段。对于每个，我必须创建一个TS类，一个表单组，并将其添加到html中。是否有类似的东西：

this.currentClient = formGroupFromType(typeof(Client));

然后有什么可以使用ng-for自动生成我的html的东西？

我当时正在考虑构建自己的类，该类可以保存属性名称，类型，默认值，isRequired和其他一些信息，例如什么编辑器（文本框，数字文本框等）。具有这样定义的属性列表可用于生成表单组和html，但是不会被强类型化，因为我看不到如何将其连接到Client类。

有什么想法或建议吗？

Answer 1

我在这里写了伪代码，希望对您有所帮助。

组件

//public form: FormGroup;
//private fb: FormBuilder

form = <FormGroup>this.fb.group({
    forms: this.fb.array(null),
});

addFormByType(formType){
    newForm: FormGroup = new FormGroup();
    // build up the form 
    // possibly by looping through the formType JSON model
    // or call a method to offload form creation by formType 
    (<FormArray>this.form.get('forms')).push(newForm);
}

模板（视图） 来自Angular docs

  <div formArrayName="forms">
    <div *ngFor="let city of form.controls['forms'].controls; index as i">
      <input formControlName="{{i}}">
    </div>
  </div>

更高级别：我将为每种表单类型创建一个ControlValueAccessor（CVA）组件。这样您的代码将更易于使用和维护。

角反应形式从类型生成形式控制

1 个答案: