Привязка MAT-SELECTION-LIST не работает с FormGroup? - PullRequest
Новая
       5

Привязка MAT-SELECTION-LIST не работает с FormGroup?

0 голосов
/ 24 мая 2018

Я пытаюсь заставить MAT-SELECTION-LIST работать внутри реактивной формы, создать группу контрольных списков, используя FormBuilder для создания FormGroup с соответствующим FormControl в нем.Инстинктивно, я просто хочу иметь такой простой элемент управления: 

      this.clientForm= this.fb.group( {
    myOtherControl: [[]]
  })

и использовать его так: 

<code><form [formGroup]="clientForm">

<h1>
  FormGroup Value
</h1>
<pre>
  {{ clientForm.get('myOtherControl').value | json }}
SOMETHING3SOMETHING4

Проблема в том, что я не могу заставить это зарегистрировать какие-либо изменения - показанное значение остается в виде пустого массива.Но если я просто использую голый FormControl, он работает, и я вижу отраженные изменения, например: 

<code>    <h1>
  FormControl Value
</h1>

<pre>
  {{ myControl.value | json }}
ЧТО-ТОSOMETHING2

См. https://stackblitz.com/edit/angular-material2-issue-yv1qaq для примера.У кого-нибудь есть идеи, что здесь происходит?Я работаю над Angular 6 / Material 6. Я знаю, что были некоторые проблемы с selectedOptions и т. Д., Но похоже, что они сейчас исправлены, и это должно просто сработать?

Edit - оооочень странно.Как было отмечено в комментариях, мой пример действительно работает, если вы исправляете тип в FormControlName.Но это была просто опечатка, мой настоящий код все еще не соединялся.Но я теперь мог видеть из примера, что он должен!Поэтому я решил сократить свою фактическую форму до этого единственного элемента управления и посмотреть, сможет ли что-нибудь заставить его подключиться к его formControl.Не верьте этому, исправив атрибут Flex Layout на окружающем элементе div!И в довершение всего, это не воспроизводится в примере со стеком, даже с точно такими же версиями материала и flex-layout.Совершенно причудливо, потраченные впустую часы на этом.В общем, в моем HTML-контексте (всплывающем диалоговом окне) это не работает: 

        <form [formGroup]="clientForm">
     {{ clientForm.get('geos').value | json }}
     <mat-selection-list
       formControlName="geos"
       (selectionChange)="onActivitySelected($event)">

        <div fxLayout="row">
          <mat-list-option *ngFor="let geo of data.geos"
                       [value]="geo.id">
        {{geo.id}} {{geo.text}}
         </mat-list-option>
       </div>
     </mat-selection-list>
   </form>

Но это делает: 

<form [formGroup]="clientForm">
  {{client.geos}}
  <!--GEOS-->
  {{ clientForm.get('geos').value | json }}
  <mat-selection-list
    formControlName="geos"
    (selectionChange)="onActivitySelected($event)"
    fxLayout="row">
    <div >
      <mat-list-option *ngFor="let geo of data.geos"
                       [value]="geo.id">
        {{geo.id}} {{geo.text}}
      </mat-list-option>
    </div>
  </mat-selection-list>
</form>

Перемещение fxLayout = "row"от div до mat-selection-list заставил его работать - страшно!

1 Ответ

0 голосов
/ 09 августа 2018

Это действительно интересная проблема.Я столкнулся с этим также.Я смог исправить это с помощью этого: 

<code>// component.ts
this.clientForm = this.fb.group( {
    myOtherControl: new FormControl([]) 
});

// component.html
<form [formGroup]="clientForm">
   <pre>
     {{ clientForm.get('myOtherControl').value | json }}
SOMETHING3SOMETHING4

По какой-то причине вы можете получить жалобу от IDE на то, что formControlName является unknown attribute of mat-selection-list, но, похоже, работает нормально.

Вот пример: https://stackblitz.com/edit/angular-material2-issue-gnwvxq

...