Angular 7 можно сравнить с модальным? - PullRequest
Новая
       9

Angular 7 можно сравнить с модальным?

0 голосов
/ 22 января 2019

Извините, если это дубликат! Поэтому я пытаюсь установить по умолчанию mat-select для первого параметра в списке. Звучит достаточно легко, правда? Неправильно. Я использую модальное окно, которое появляется для ввода задачи, и пытаюсь установить статус по умолчанию (который вы можете выбрать только после выбора проекта). Функция compareWith работает просто отлично, но после выхода из модального режима и повторного входа (без обновления страницы) второй параметр в функции compareWith имеет значение NULL, и статус по умолчанию не имеет значения. При выходе из формы я сбрасываю ее. Я использую FormControl, а не ngModel, просто к вашему сведению.

Я пробовал пару различных compareWith функций, но нашел только одну, которая работает. Я попытался использовать [selected]="whatever" на теге select, но быстро выяснил, что он не работает для материальных ресурсов. Я также попытался установить значение formcontrol равным состоянию при сбросе формы. Это работает, но оно отображается, когда я снова открываю модальное окно. Поскольку статус отключен до тех пор, пока проект не будет выбран, я не хочу показывать статус при загрузке.

Выбор проекта в html: 

<mat-form-field class="form-group">
      <mat-select id="project" name="project" placeholder="Project" formControlName="project" [required]="true"
        [ngClass]="{'is-invalid': formAddTask.project.errors}">
        <mat-option *ngFor="let project of availableProjects" [value]="project.id">{{project.name}}</mat-option>
      </mat-select>
      <mat-error *ngIf="addTaskForm.get('project').hasError('required')">Project is required</mat-error>
    </mat-form-field>

Статус выбора в html: 

 <mat-form-field class="form-group">
      <div class="input-group"></div>
      <mat-select id="status" name="status" placeholder="Status" formControlName="status" [compareWith]="compareObjects">
        <mat-option *ngFor="let status of availableStatuses; let i = index" [class.selected]="status === selectedStatus" 
         [value]="status.id">{{status.name}}</mat-option>
      </mat-select>
    </mat-form-field>

Сравнить с функцией в тс: 

compareObjects(o1: any, o2: any): boolean {
return o1.name === o2.name && o1._id === o2._id;
}

Дайте мне знать, если мне еще что-нибудь нужно показать!

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

Извините, если я слишком много повторюсь, я бы скорее дал слишком много информации, чем недостаточно. Заранее спасибо, любая помощь приветствуется! :)

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Так что я в итоге нашел обходной путь. Я добавил событие onChange в раскрывающийся список проекта и установил там значение раскрывающегося списка состояний.

Это код, который я использовал в итоге:

onProjectChange() { this.addTaskForm.get('status').setValue(this.availableStatuses[0].id); }

0 голосов
/ 22 января 2019

Первым делом летучей мыши, да, [compareWith] может абсолютно использоваться в modals

Чтобы устранить проблему, используйте [(value)] вместо [value] и свяжите его с status вместо status.id. Это означает, что compareWith получит значение select и значение option как status объекты, а функция сравнения, если она у вас есть, получит id s и name s из этих объектов и сравнит . 

 <mat-form-field class="form-group">
      <div class="input-group"></div>
      <mat-select id="status" name="status" placeholder="Status" formControlName="status" [compareWith]="compareObjects">
        <mat-option *ngFor="let status of availableStatuses; let i = index" [class.selected]="status === selectedStatus" 
         [(value)]="status">{{status.name}}</mat-option>
      </mat-select>
    </mat-form-field>
...