вложенные формы и .control против .value - требуется помощь - PullRequest
Новая
       7

вложенные формы и .control против .value - требуется помощь

0 голосов
/ 02 марта 2019

Я думал, что у меня проблема с выбором матов во вложенных формах, но оказывается, что у меня проблема с .value .control в моих формах, и я не уверен, как ее исправить

, поэтому в принципеУ меня есть значения для элементов, хранящихся в массиве, и я хочу показать их на странице

Элемент: item1 Количество: 1,45 $ Причина: 1

Item: item2 Количество: 1,50 $ Причина: 2

при нажатии на кнопку редактирования я делаю скрытие / отображение полей ввода для редактирования, а не просто просмотра.

проблема, с которой я сталкиваюсь, связана с циклом for

* ngFor = "let type of widgetForm.get ('types'). value;

значения отображаются очень хорошо, но если я нажму кнопку редактирования, браузер зависнет, и в итоге мои поля ввода отобразятся, но я не могу редактироватьзначения в пределах их соответствующих полей

Если я изменю цикл for на этот

* ngFor = "let type of widgetForm.get ('types'). controls;

У меня нет отображаемых значений, но я могу нажать «Изменить» и отредактировать всю информацию.Так что я не уверен, как мне получить свой торт и съесть его ... в основном перебирая мой массив, чтобы отобразить его, затем отредактировать его

вот мой конструктор форм в ts 

this.widgetService.getWidgetTypes(this.widget.type).subscribe(types => {
  this.widgetTypes = types   

  let elements: FormGroup[]
  for (let index = 0; index < this.widgetTypes .length; index++) {
    const element = this.widgetTypes [index];
    const controls = <FormArray>this.widgetForm.controls['types']
    controls.push(
      this.formBuilder.group({
        item: [element.item, Validators.required],
        amount: element.amount,
        reason: element.reason
      })
    )
  }
})

мой HTML выглядит так: 

    <div [formGroup]="widgetForm">
       <div formArrayName="types" *ngFor="let type of widgetForm.get('types').value; let i = index;">
         <div [formGroupName]="i" >
         <ng-container *ngIf="readOnly[i]">
           <div>
             <dl>
                <dt>Item:<dd>
                <dd>{{ type.item }}<dd>
             <dl>
              <dl>
                <dt>Amount:<dd>
                <dd>{{ type.amount }}<dd>
             <dl>
              <dl>
                <dt>Reason:<dd>
                <dd>{{ type.reason }}<dd>
             <dl>
           <div>
           <div><i class="icon-edit" (click)="editItem(i)"></i></div>
           </ng-container>
           <ng-container *ngIf="!readOnly[i]">
           <div class="col">
             <mat-form-field >
              <input matInput placeholder="Item" formControlName="item"/>
             </mat-form-field>
           </div>
           <div class="col">
            <mat-form-field >
             <input matInput placeholder="Amount" formControlName="amount"/>
            </mat-form-field>
           </div>
           <div class="col">
            <mat-form-field>
             <mat-select placeholder="Reason" formControlName="reason">
              <mat-option>{{ type.reason }}</mat-option>
              <mat-option value="1">Duplicate Payment</mat-option>
              <mat-option value="2">Incorrect Amount</mat-option>
              <mat-option value="3">Lost/Stolen</mat-option>
              <mat-option value="4">Expired</mat-option>
            </mat-select>
           </mat-form-field>
         </div>
       </ng-container>
       </div>
      </div>
     </div>

Нужно ли делать что-то особенное, когда выбор матов находится во вложенной группе или что-то с помощью конструктора форм?

1 Ответ

0 голосов
/ 04 марта 2019

Я нашел решение для всех, кому интересно ...

Я изменил свой

* ngFor = "let type для widgetForm.get ('types'). Value

до

* ngFor = "let type для widgetForm.get ('types'). Control {{item.value.reason}} и т. Д. ... вместо {{type.reason}}

затем, когда я ссылаюсь на значения readOnly, на них ссылается

...