Выбор «нулевого» значения с помощью параметра mat с неактивными угловыми 7 реактивными формами - PullRequest
Новая
       9

Выбор «нулевого» значения с помощью параметра mat с неактивными угловыми 7 реактивными формами

0 голосов
/ 20 февраля 2019

Я пытаюсь по умолчанию выбрать опцию, которая содержит «null» [значение] в выборе матов.Проблема в том, что он не выбирает параметр со значением «null» [значение], когда отображается HTML.Я использую Angular 7 Reactive Forms с Angular Material 7. Вот что у меня есть -

HTML: 

<mat-select placeholder="User" formControlName="userId">
  <mat-option [value]="null">None</mat-option>
  <mat-option *ngFor="let user of users" [value]="user.userId">
      {{ user.name }}
  </mat-option>
</mat-select>

Component.ts:

this.userId.setValue (null);

В строке выше предполагается, что я уже создал свой экземплярformGroup с одним из formControls, называемым userId и this.userId, является свойством моего компонента, который ссылается на this.userForm.get ('userId') ".

Поэтому, когда я устанавливаю formControlЗначение «userId», равное нулю, никогда не выбирается в html.У меня сложилось впечатление, что в качестве одного из вариантов выбора циновки можно указать значение «null». Я ошибаюсь?Если нет, то любые предложения о том, что я могу сделать, чтобы это работало так, как я хочу.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

Нельзя установить значение NULL, поскольку у вас есть целочисленное свойство (user.userId), пример кода должен работать.

Код шаблона: 

<form [formGroup]="patientCategory">
    <mat-form-field class="full-width">
        <mat-select placeholder="Category" formControlName="patientCategory">
            <mat-option [value]="0">None</mat-option>
            <mat-option *ngFor="let category of patientCategories" [value]="category.id">
                {{category.name}} - {{category.description}}
            </mat-option>
        </mat-select>
    </mat-form-field>

    <p>{{patientCategory.get('patientCategory').value | json}}</p>
</form>

Код компонента 

import { Component, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

/**
 * @title Basic table
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  patientCategory: FormGroup;

  patientCategories = [{
    id: 1,
    name: 'name 1',
    description: 'description 1'
  }, {
    id: 2,
    name: 'name 2',
    description: 'description 2'
  }, {
    id: 3,
    name: 'name 3',
    description: 'description 3'
  }]

  constructor(private fb: FormBuilder) { }

  ngOnInit() {

    this.patientCategory = this.fb.group({
      patientCategory: [null, Validators.required]
    });

    //const toSelect = this.patientCategories.find(c => c.id == 3);
    this.patientCategory.get('patientCategory').setValue(0);
  }
}

Демо

0 голосов
/ 20 февраля 2019

Можете ли вы попробовать выдвинуть значения NULL по умолчанию в качестве первой опции массива 'users'. 

this.users.unshift({
  userId: null,
  name: 'select'
});

Шаблон: 

<mat-select placeholder="User" formControlName="userId">
  <mat-option *ngFor="let user of users" [value]="user.userId">
      {{ user.name }}
  </mat-option>
</mat-select>
...