Как очитсить mat-select в ReactiveForm Angular 4+?

Question

[Виталий Мудрый]

Добрый день. Делаю приложение в котором есть форма на модальном окне. Вот код:

<form [formGroup]="offerForm" (ngSubmit)="createOffer(offerForm.value)">
 <div class="modal-body">
    <div class="form-group">
      <input class="form-control" formControlName="name" placeholder="Name">
     </div>
     <mat-select placeholder="Advertiser" class="form-control" formControlName="advertiser">
       <mat-option *ngFor="let option of advertisersList" [value]="option.id">
        {{option.name}}
      </mat-option>
      </mat-select>
     </div>
     <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         <button type="submit" class="btn btn-primary" [disabled]="!offerForm.valid">Create</button>
       </div>
     </form>

После закрытия модального окна я удаляю ее содержимое:

$('#myOffer').on('hidden.bs.modal', () => {
    this.isUpdate = false;
    this.offerForm.reset();
  }); // reset form

Но значения select осталось на форме, и удаляется только если на него нажать. Если кто знает как правильно очистить форму, помогите пожалуйста

Answer 1

[Евгений Калибров]

Видимо вам нужно вызвать чейндж детектор:

$('#myOffer').on('hidden.bs.modal', () => {
    this.isUpdate = false;
    this.offerForm.reset();
    this.cd.detectChanges();
  }); // reset form

Ну и соответственно заинжектить ChangeDetector в конструкторе класса: private cd:ChangeDetectorRef