Динамическая передача имени ссылки на шаблон в форме

Question

У меня есть форма, которую я создаю, вызывая REST API. С самого начала у меня нет информации о том, сколько входных данных я создам, их тип, а также нужны ли они или нет. Я использую подход, основанный на шаблонах, для создания формы.

Для этого я создал свой html шаблон:

<div *ngFor="let category of categories">
  <form (ngSubmit)="onSubmit()" #f="ngForm">
     <span *ngIf="category.indexes.length != 0; else noInput">
        <div *ngFor="let indexItem of category.indexes" >
           <div [ngSwitch]="indexItem.dataType">
               <div class="form-group" *ngSwitchCase="'nvarchar'">
                  <label for="{{ indexItem.indexName }}"> {{ indexItem.indexName}}</label>
                  <input
                       class="form-control"
                       type="text"
                       ngModel
                       name="{{ indexItem.indexName }}"
                       id="{{ indexItem.indexName }}"
                       [required]="onRequiredCheck(indexItem)"
                    />
               </div>
               // others swithcase   
           </div>
           <span class="help-block" *ngIf="!templateRefName.valid && templateRefName.touched">
              Please enter a valid {{ indexItem.indexName }}
           </span>
       </div>
       <div>
         <button class="btn btn-primary" type="submit">Send</button>
       </div>
    </span>
  </form>
  <ng-template #noInput>
    <h3>No input to fill</h3>
  </ng-template>
</div>

Моя проблема в том, что я хочу проверить правильность ввода заполнен. Для каждого ввода я хотел бы установить ссылку на шаблон, которая принимает значение: indexItem.indexName

Answer 1

Благодаря @tommueller я наконец решил свою проблему: я создал метод для получения своих индексов, который вызывает мой API, который также позволяет мне создавать свою форму:

private getIndexes(categoryId): void {
  this.signupForm = new FormGroup({});

  // let control;
  // extracting the list of indexes from the API response
  const response = this.apiService.getCategoryIndexes(categoryId).subscribe(
    (data) => {
      this.category = data as CategoriesModel;
      // tslint:disable-next-line:prefer-for-of
      for (let i = 0; i < this.category[0]['indexes'].length; i++) {
        this.indexes.push(this.category[0]['indexes'][i]);
      }
      // tslint:disable-next-line:forin
      this.indexes.forEach((index) => {
          if (index.required === 'YES') {
            this.control = new FormControl(null, [Validators.required]);
          } else {
            this.control = new FormControl(null);
          }
          this.signupForm.addControl(index.indexName, this.control);
      });
    }
  ); 

Этот метод также вызывается в ngOnInit & ngOnChange (форма создается с использованием ввода выбора.

ngOnInit(): void {
  console.log('# ngOnInit() called');
  console.log('Categories : ' + this.category);
  this.signupForm = new FormGroup({});
  this.getIndexes(this.category?.id);
}

Наконец, я переписал свой HTML, чтобы использовать реактивные формы:

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
    <span *ngIf="indexes.length != 0; else noInput">
        <div *ngFor="let indexItem of indexes" >
           <div [ngSwitch]="indexItem.dataType">
              <div *ngSwitchCase="'nvarchar'" class="form-group">
                <label for="{{ indexItem.indexName }}"> {{ indexItem.indexName}}</label>
                <input
                    #[{{indexItem.indexName}}]
                    class="form-control"
                    id="{{ indexItem.indexName }}"
                    [formControlName]="indexItem.indexName"
                    type="text"
                />
              </div>
              <span *ngIf="!signupForm.get(indexItem.indexName).valid && signupForm.get(indexItem.indexName).touched" class="help-block">
                  <span *ngIf="signupForm.get(indexItem.indexName).errors['required']">
                      Field is required
                  </span>
             </span>
         </div>
      //...
     </div>
  </span>
  <div>
     <button class="btn btn-primary" type="submit">Send</button>
   </div>
</form>
<ng-template #noInput>
  <h3>No input to fill</h3>
</ng-template>

Переменные должны быть объявлены и также инициализированы (например):

indexes: IndexesModel[] = new Array<IndexesModel>();
signupForm: FormGroup = new FormGroup({});
control: FormControl = new FormControl();