Установить значение по умолчанию с помощью mat-select и formControl - PullRequest
Новая
       1

Установить значение по умолчанию с помощью mat-select и formControl

0 голосов
/ 13 октября 2019

Я пытаюсь установить значение по умолчанию для моего formControl, но, кажется, не работает.

select-hint-error-example.ts 

export class SelectHintErrorExample {
  animalControl = new FormControl('', [Validators.required]);
  selectFormControl = new FormControl('', Validators.required);
  animals: Animal[] = [
    {name: 'Dog', sound: 'Woof!'},
    {name: 'Cat', sound: 'Meow!'},
    {name: 'Cow', sound: 'Moo!'},
    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
  ];
}

select-hint-error-example.html 

<h4>{{ 'FormControl: ' + (animalControl.value | json) }}</h4>
<mat-form-field>
  <mat-label>Favorite animal</mat-label>
  <mat-select [formControl]="animalControl" required>
    <mat-option>--</mat-option>
    <mat-option *ngFor="let animal of animals" [value]="animal">
      {{animal.name}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
  <mat-hint>{{animalControl.value?.sound}}</mat-hint>
</mat-form-field>

вывод в браузере enter image description here

Мне нужноиспользовать formControl в моем компоненте, как мне установить значение по умолчанию?

Здесь the stackblitz

Update 1

Обновлена ​​структура вопроса с улучшенным внешним видомфрагменты кода вместо изображений

Ответы [ 3 ]

1 голос
/ 13 октября 2019

Если вы используете объект для установки значения по умолчанию для select, вы должны использовать функцию compareWith.

select поддерживает ввод CompareWith. CompareWith принимает функцию, которая имеет два аргумента: option1 и option2. Если задано CompareWith, Angular выбирает опцию по возвращаемому значению функции.

component.html 

<h4>{{ 'FormControl: ' + (animalControl.value | json) }}</h4>
<mat-form-field>
    <mat-label>Favorite animal</mat-label>
    <mat-select [compareWith]="compareFn" [formControl]="animalControl" required>
        <mat-option>--</mat-option>
        <mat-option *ngFor="let animal of animals" [value]="animal">
            {{animal.name}}
        </mat-option>
    </mat-select>
    <mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
    <mat-hint>{{animalControl.value?.sound}}</mat-hint>
</mat-form-field>

component.ts 

compareFn(cmp1,cmp2){
    return cmp1 && cmp2 ? cmp1.sound === cmp2.sound : cmp1 == cmp2;
  }

Forked Пример

Ссылка

0 голосов
/ 13 октября 2019

вы можете разделить объявление и создание экземпляра animalControl и установить значение по умолчанию в конструкторе или ngOnit. 

export class SelectHintErrorExample {
  selectFormControl = new FormControl('', Validators.required);
  animals: Animal[] = [
    {name: 'Dog', sound: 'Woof!'},
    {name: 'Cat', sound: 'Meow!'},
    {name: 'Cow', sound: 'Moo!'},
    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
  ];
  animalControl:FormControl;

  constructor(){
  this.animalControl = new FormControl(this.animals[2], [Validators.required]);
  }
}
0 голосов
/ 13 октября 2019

Для дополнительного ответа на вопрос Chellapan, если вы не хотите использовать compareWith , вам нужно поставить "тот же объект", например, 

animalControl = new FormControl(this.animals[2], [Validators.required]);
//or
const animal=this.animals.find(x=>x.name=='Cow')
animalControl = new FormControl(animal, [Validators.required]);

Другой подход состоит в том, что [value] был "animal.name" 

<mat-option *ngFor="let animal of animals" [value]="animal.name">

И вы можете использовать 

animalControl = new FormControl('Cow',[Validators.required]);

, но вам нужно создать функцию 

searchAnimal(name)
{
   return name?this.animals.find(x=>x.name==name):null
}

, если вы хотите использовать 

  <mat-hint >{{searchAnimal(animalControl.value)?.sound}}</mat-hint>
...