Пользовательский материал выпадающий с реактивной формы - PullRequest
Новая
       23

Пользовательский материал выпадающий с реактивной формы

2 голосов
/ 25 января 2020

В последнее время я пытаюсь создать пользовательский раскрывающийся компонент с помощью средства доступа к значению, но не могу установить значение для этого раскрывающегося списка.

Эта часть раскрывающегося компонента 

    <mat-form-field>
      <mat-label>Favorite food</mat-label>
      <mat-select>
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

ts part 


    @Input() foods:any
    get value(): any {
        return this.innerValue;
      }

      // set accessor including call the onchange callback
      set value(v: any) {
        console.log(v, "v");
        if (v !== this.innerValue) {
          this.innerValue = v;
          this.onChangeCallback(v);
        }
      }

Компонент приложения HTML: 

    <app-input-dropdown [foods]="foods" formControlName="dropdown">
          </app-input-dropdown>

ts: 

     this.foods = [
          { value: "steak-0", viewValue: "Steak" },
          { value: "pizza-1", viewValue: "Pizza" },
          { value: "tacos-2", viewValue: "Tacos" }
        ];

     ngOnInit() {
    this.myForm = this.fb.group({
    dropdown:[null]
    })
    const valueToSet = { value: "steak-0", viewValue: "Steak" }
        this.myForm.dropdown.patchValue({
    dropdown:valueToSet
    }) ;
      }

Так что это не работает, я не знаю почему.

1 Ответ

0 голосов
/ 26 января 2020

Я могу придумать несколько изменений / дополнений в вашем коде. Во-первых, вы должны изменить способ установки значения в форме: 

const valueToSet = { value: "steak-0", viewValue: "Steak" }
        this.myForm.dropdown.patchValue({
    dropdown:valueToSet
    }) ;

Выполнение этого приведет к ошибке, поскольку внутри this.myForm.dropdown.patchValue не должно быть ключевого слова dropdown. Должно быть - this.myForm.patchValue. Но даже после исправления этого, правильный способ установить значение: 

this.myForm.controls["dropdown"].setValue("pizza-1");

или при использовании patchValue: 

this.myForm.patchValue({dropdown: 'pizza-1'});

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

Далее необходимо убедиться, что в вашем пользовательском элементе управления есть метод writeValue(): 

 writeValue(val: string): void {
    this.selectedOption = val;
  }

Затем, наконец, , привяжите selectedOption (или innerValue в вашем случае) к тегу mat-select: 

  <mat-select placeholder="Favorite food" [(ngModel)]="selectedOption">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

Нет необходимости что-либо менять в компоненте приложения html. Он по-прежнему будет использовать реактивные формы: 

<app-input-dropdown [foods]="foods" formControlName="dropdown">
          </app-input-dropdown>

Я могу предоставить образец в Stackblitz, если вы все еще столкнетесь с проблемой. Просто дай мне знать.

...