Как создать и связать динамическую модель с динамически создаваемыми полями в Angular 6 - PullRequest
0 голосов
/ 31 августа 2018

У меня есть задача, в которой мне нужно нажать Get API, и в этом ответе API я получаю ключ поля HTML (ключ API может быть 2 или более), с помощью которого мне нужно динамически создавать форму HTML в соответствии с ключом , Ниже мой HTML код, с которым я создаю форму:

<form class="form-horizontal" #f1=ngForm>
  <div class="clearfix"></div>
  <div class="row">
    <div class="col-12">
      <div class="form-row" *ngFor="let aux of AuxfieldAndData">
        <div class="form-group col-md-6">
          <label for="Credit Limit Currency"> {{aux.ColumnTitle}}</label>
          <select class="form-control" *ngIf="aux.DropDownArray.length !== 0; else txtBox" [(ngModel)]="aux.ColumnName" [name]="aux.ColumnName">
            <option [value]="field.key" *ngFor="let field of aux.DropDownArray">{{field.value}}</option>
          </select>
          <ng-template #txtBox>
            <input type="text" class="form-control" [(ngModel)]="aux.ColumnName" [name]="aux.ColumnName">
          </ng-template>
        </div>
      </div>
    </div>
    <div class="col-md-12 text-right mt-3">
      <button type="submit" id="submit" (click)=" doOnSubmit($event)" class="btn btn-primary">
        <i class="fa fa-floppy-o"></i> Save
      </button>
    </div>
  </div>
</form>

и метод для чтения данных API, записанных в TypeScript:

createDynamicFields(dataArray: Array<any>) {
    dataArray.forEach(auxiliary => {
      const dropValue = auxiliary.values;
      const dropdownList = [];
      if (dropValue !== null) {
        const DVal = Object.keys(auxiliary.values);
        DVal.forEach(DropDownVal => {
          const list = {
            key: DropDownVal,
            value: dropValue[DropDownVal]
          };
          dropdownList.push(list);
        });
      }
      const array = {
        ColumnTitle: auxiliary.columnTitle,
        DropDownArray: dropdownList,
        ColumnName: auxiliary.columnName
      };
      this.AuxfieldAndData.push(array);
    });
  }

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

{
   "auxiliaryformfeild":[
      {
         "columnName":"credit_currency",
         "columnTitle":"Credit Limit Currency",
         "values":{
            "Euro":"EUR",
            "Sterling":"GBP",
            "US Dollar":"USD"
         }
      },
      {
         "columnName":"credit_limit",
         "columnTitle":"Credit Limit",
         "values":null
      }
   ],
   "Status":"OK"
}

Пожалуйста, помогите мне с вышеуказанным сценарием. Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...