Угловые реактивные формы генерируют элементы управления формы из типа

Question

Итак, у меня есть класс Client в TypeScript, скажем, у меня есть:

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

А потом что-то, что может автоматически генерировать мой html, используя ng-for или что-то еще?

Я думал о создании своего собственного класса, который мог бы содержать имя свойства, тип, значение по умолчанию, 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);
}

Шаблон (просмотр) От Угловые документы

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

Более высокий уровень: я бы создал компонент ControlValueAccessor (CVA) для каждого типа формы. Тогда ваш код будет легче работать и поддерживать.