на странице загрузки положить значение по умолчанию в раскрывающемся списке выбора мат - PullRequest
Новая
       54

на странице загрузки положить значение по умолчанию в раскрывающемся списке выбора мат

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

Я создал форму, я использую угловой материал, и я могу успешно получить и установить значение в текстовом поле или в поле текстовой области, но не могу поместить значение в раскрывающемся списке, у меня есть два json-данных. Первый заполнит выпадающий список, а после этого второй установит значение выпадающего списка. Так что на странице загрузки я должен отобразить это значение в раскрывающемся списке, который не устанавливается 

  createProductForm(): FormGroup {
    return this._formBuilder.group({
      CATEGORY: [this.product.categories]
    });
  }


 ngOnInit() {
  getAllCategory=[
{"TYPE_CODE": "CATEGORY","TYPE_DESC": "PUBLIC"},
{"TYPE_CODE": "CATEGORY","TYPE_DESC": "PRIVATE"},
{"TYPE_CODE": "CATEGORY","TYPE_DESC": "SYSTEM"},
]

defaultSelectCategory=[
{"CATEGORY": "PRIVATE"}
]


this.defaultCat= defaultSelectCategory[0].CATEGORY;
}




<mat-form-field appearance="outline" fxFlex="100">
   <mat-label>Project</mat-label>
   <mat-select formControlName="CATEGORY" [(value)]="defaultCat" required >
 <mat-option *ngFor="let item of getAllCategory" value="{{item.TYPE_DESC}}" (onSelectionChange)="getCATEGORY(item)">
     {{item.TYPE_DESC}}
  </mat-option>

  </mat-select>
     <mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>
   </mat-form-field>

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

Ответы [ 3 ]

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

Попробуйте использовать ngModel 

<div>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</div>

И значение с квадратной скобкой в ​​параметрах мата

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

Итак, во-первых, я бы предложил пару вещей:

  • Поскольку вы используете формы дисков модели (с ReactiveFormsModule), вам не нужно [(значение)]
  • Вам также не нужен обязательный атрибут в форме выбора циновки, это вызовет раздражающее предупреждение в вашей консоли.
  • Ваше значение по умолчанию не обязательно должно быть массивом, вы можетеиспользуйте непосредственно объект:)
  • Переместите установщик значений и требуемую проверку в вашу модель

Сначала измените значение по умолчанию на объект, или чтобы не повторяться, вы можете это сделатьс тем же массивом, который у вас уже есть: 

this.defaultSelectCategory = this.getAllCategory[1];

Теперь, допустим, ваша выпадающая форма FormControlName выглядит следующим образом: 

CATEGORY: new FormControl(this.defaultSelectCategory.TYPE_DESC, [Validators.required]),

Тогда в вашем HTML: 

<mat-form-field appearance="outline" fxFlex="100">
  <mat-label>Project</mat-label>
  <mat-select formControlName="CATEGORY">
  <mat-option *ngFor="let item of getAllCategory" [value]="item.TYPE_DESC">
    {{item.TYPE_DESC}}
  </mat-option>

 </mat-select>
 <mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>

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

Я вижу много проблем в вашем коде, переменные (getAllCategory, defaultSelectCategory) объявлены внутри ngOnInit (), что неверно. Вам нужно объявить их сверху и использовать их внутри ngOnInit () с помощью ключевого слова this.

Я создал рабочий форк здесь - https://stackblitz.com/edit/angular-5r6u3p-dhwgqm Посмотрите на него.

DatePicker HTML 

<mat-form-field appearance="outline" fxFlex="100">
<mat-label>Project</mat-label>
<mat-select [(value)]="defaultCat" required>
    <mat-option *ngFor="let item of getAllCategory" value="{{item.TYPE_DESC}}"
        (onSelectionChange)="getCATEGORY(item)">
        {{item.TYPE_DESC}}
    </mat-option>
</mat-select>
<mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>

DatePicker TS 

export class DatepickerValueExample {
  getAllCategory=[
    {"TYPE_CODE": "CATEGORY","TYPE_DESC": "PUBLIC"},
    {"TYPE_CODE": "CATEGORY","TYPE_DESC": "PRIVATE"},
    {"TYPE_CODE": "CATEGORY","TYPE_DESC": "SYSTEM"},
  ]
  defaultSelectCategory=[
    {"CATEGORY": "PRIVATE"}
  ]
  defaultCat;

  ngOnInit() {
    this.defaultCat= this.defaultSelectCategory[0].CATEGORY;
  }

  getCATEGORY() {
  }
}
...