Угловой 5 + Выбор углового материала + Реактивные формы == Не отображаются начальные параметры

Question

Как видно из названия, у меня есть реактивная форма, в которой содержится несколько <mat-select>. При начальной загрузке формы начальная опция не отображается, хотя form.value показывает, что это так.

Соответствующий компонент.ts:

export class DesJobInfoEditComponent implements OnInit {

...

currentJobData: IJob;
jobTypes: IJobType[];

...

constructor(private fb: FormBuilder) {

    ...

        // Construct forms
        this.createForm();

        this.initializeForm();

}

createForm() {
    this.editJobInfoForm = this.fb.group({
        ...
        JobType: '', // mat-select
        ...
    });
}

initializeForm() {
    this.rebuildForm();
}

rebuildForm() {
    this.editJobInfoForm.reset({
        ...
        JobType: this.jobTypes[this.currentJobData.JobType].DisplayDesc,
        ...
    });
}

}

Соответствующий html:

<mat-form-field fxFlex>
      <mat-label>Job Type</mat-label>
       <mat-select formControlName="JobType" placeholder="Job Type">
              <mat-option *ngFor="let jobType of jobTypes" value="jobType.value">
                     {{ jobType.DisplayDesc }}
               </mat-option>
        </mat-select>
  </mat-form-field>

Когда форма загружается, селекторы не отображают изначально выбранную опцию, однако, они установлены правильно, по-видимому:

Form value { ... "JobType": "0 - Standard", ... } 

Все, что отображается в форме, является заполнителем.

Кажется, это не должно быть так сложно.

Что я делаю не так?

EDIT:

this.jobTypes загружается при загрузке модуля, и это BehaviorSubject, который живет в моей службе данных. Я подписываюсь на него в конструкторе этого компонента так:

this.data.jobTypes.subscribe(jobTypes => { this.jobTypes = jobTypes });

Answer 1

Сравнение Angalural Material с: (o1: любой, o2: любой) => логическое значение от (ссылка API для выбора углового материала)

component.ts

 export class ParentOneComponent implements OnInit {
  materialFormSample: FormGroup;
  constructor() { }

  ngOnInit() {
    this.configureMaterialFormSample();
  }
  name: string = 'Emilius Patrin Mfuruki';
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
  selectedToppingList = ['Extra cheese', 'Tomato', 'Onion'];

  compareWithFunc = (a: any, b: any) => a == b;

  configureMaterialFormSample() {
    this.materialFormSample = new FormGroup({
      name: new FormControl(this.name),
      toppings: new FormControl(this.selectedToppingList)
    })
  }
  onSubmitForm() {
    if (this.materialFormSample.valid) {
      console.log('submitting Form Content Valid', this.materialFormSample.value);
    }
  }
}

component.html

<form [formGroup]="materialFormSample" (ngSubmit)="onSubmitForm()" autocomplete="off">
      <mat-form-field class="w-100">
        <input matInput placeholder="Name" formControlName="name">
      </mat-form-field>
      <mat-form-field class="w-100">
        <mat-label>Toppings</mat-label>
        <mat-select formControlName="toppings" multiple [compareWith]="compareWithFunc">
          <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
        </mat-select>
      </mat-form-field>
      <div class="clearfix">
        <button type="submit" mat-raised-button color="primary" class="float-right">Submit Form</button>
      </div>
    </form>

Answer 2

Использовать сравнение с функцией как есть ...

Step1: поставить тег [compareWith], как показано

<mat-form-field>
  <mat-select placeholder="Pick item..." formControlName="selectedItem" 
    [compareWith]="compareFn">
    <mat-option *ngFor="let item of items">
        {{item.name}}
    </mat-option>
  </mat-select>
</mat-form-field>
<button (click)="changeValue()">Change value</button>

Стет 2: объявить переменную compareFn и функцию compareByValue, как показано ниже, никаких изменений не требуется

compareFn: ((f1: any, f2: any) => boolean) | null = this.compareByValue;

compareByValue(f1: any, f2: any) { 
  return f1 && f2 && f1.name === f2.name; 
}

Answer 3

Привет, я знаю, что уже слишком поздно, но я знаю более простое решение. Ваши компоненты U I (html) описаны правильно

в вашем машинописном тексте вы сравниваете объект со строкой, которая не даст никакой проверки. Поэтому всегда сравнивайте объекты с нулем (в проверке)

просто в createForm() { this.editJobInfoForm = this.fb.group({ ... JobType: '', // mat-select ... }); }

изменить JobType: '' заменить на JobType:[null]

Answer 4

Несколько вещей

1. [formControlName] необходимо использовать вместе с [formGroup]. Если вы не хотите использовать [formControlName] + [formGroup], вместо этого вы можете использовать [formControl].

2. В angular существует разница между указанием атрибута как value и [value]. Когда атрибут заключен в скобки [], он интерпретируется как javascript / угловой шаблон скрипта (я думаю, что {{}}). Когда это не , заключенное в скобки, оно интерпретируется как строка (то есть value="jobType.value" === [value]="'jobType.value'" и [value]="jobType.value" === value="{{jobType.value}}" (на самом деле я думаю, что между небольшими различиями [value]="jobType.value" и value="{{jobType.value}}", но ж / д)). Поэтому, когда вы пишете <mat-option *ngFor="let jobType of jobTypes" value="jobType.value">, значение каждого mat-option равно "jobType.value", что, я полагаю, вам не нужно. Поэтому вам нужно изменить код на <mat-option *ngFor="let jobType of jobTypes" [value]="jobType.value">

* * Например, тысяча тридцать-семь

<mat-form-field [formGroup]='editJobInfoForm' fxFlex>
  <mat-label>Job Type</mat-label>
  <mat-select formControlName="JobType" placeholder="Job Type">
    <mat-option *ngFor="let jobType of jobTypes" [value]="jobType.value">
      {{ jobType.DisplayDesc }}
    </mat-option>
  </mat-select>
</mat-form-field>

В некоторой степени не связан с вашей проблемой, почему есть методы createForm() и initializeForm()? Почему бы просто не

constructor(private fb: FormBuilder) {

    ...

        // Construct forms
        this.createForm();    
}

createForm() {
    this.editJobInfoForm = this.fb.group({
        ...
        JobType: this.jobTypes[this.currentJobData.JobType].DisplayDesc,
        ...
    });
}