невозможно добавить динамические элементы управления в форму - PullRequest
Новая
       22

невозможно добавить динамические элементы управления в форму

0 голосов
/ 24 сентября 2018

Я новичок в ionic,

Я хочу добавить динамический массив элементов управления в myForm

, вот мой код:

Home.html 

<form [formGroup]="myForm">
<ion-list no-lines class="listMargin">
        <ion-item>
            <ion-checkbox formControlName="md"  (ionChange)="orgSelection('md')"></ion-checkbox>
        </ion-item>
        <div formGroupName="mdNames" *ngIf="myForm.controls.md.value">
            <div formArrayName="details_array">
                <div *ngFor="let obj of myForm.controls.mdNames.controls.details_array.controls; let i=index;">
                        <ion-item no-lines>
                          <ion-input [formControlName]="i" type="text" class="textFields" placeholder="Type document name"></ion-input>
                        </ion-item>
                </div>
            </div>
        </div>

        <ion-item>
            <ion-checkbox formControlName="specifictn"  (ionChange)="orgSelection('specifictn')"></ion-checkbox>
        </ion-item>
        <div formGroupName="specifictnNames" *ngIf="myForm.controls.specifictn.value">
                <div formArrayName="details_array">
                    <div *ngFor="let obj of myForm.controls.specifictnNames.controls.details_array.controls; let i=index;" class="inputFieldListSpacing">
                             <ion-item no-lines>
                                <ion-input [formControlName]="i" type="text" class="textFields" placeholder="Type document name"></ion-input>
                            </ion-item>
                    </div>
                </div>
        </div>
    </ion-list>

    <div formArrayName="docs">
        <ion-list *ngFor="let obj of myForm.controls.docs.controls; let i=index;">
            <div [formGroupName]="i">
                <ion-item no-lines>
                    <ion-input type="text" formControlName="name" placeholder="Type name" [class.invalid]="!obj.controls.name.valid && (obj.controls.name.dirty || submitAttempt)"></ion-input>
                </ion-item>
                <div formArrayName="details_array">
                    <ion-list *ngFor="let obj1 of obj.controls.details_array.controls; let j=index;" style="margin: 0">
                      <ion-item no-lines>
                                <ion-input [formControlName]="j" type="text" class="textFields" placeholder="Type document name"></ion-input>
                            </ion-item>
                    </ion-list>
                </div>
            </div>
        </ion-list>
</form>

Home.ts 

config: any[] = [
    {
      md: false,
      mdNames: this._fb.group({details_array: this._fb.array([])})
    },
    {
      specifictn: false,
      specifictnNames: this._fb.group({details_array: this._fb.array([])})
    },
    {
      docs: []
    },
  ];

ngOnInit() {

    this.myForm = this.createGroup();
}

createGroup() {
    const group = this._fb.group({});
    this.config.forEach(control => 
      group.addControl(control, control)
    );
    return group;
  }

Обязательный вывод: 

{"md":false,"mdNames":{"details_array":[]},"specifictn":false,"specifictnNames":{"details_array":[]},"docs":[]}

В моем массиве настроек так много элементов,Например, я добавил немного данных в конфигурационный массив.

Я хочу также сделать мой home.html файл .ts динамическим.

Пожалуйста, помогите и спасибо в adavnce

...