Как привязать отображаемое значение поля выбора углового материала к ngModel - PullRequest
Новая
       37

Как привязать отображаемое значение поля выбора углового материала к ngModel

1 голос
/ 09 июня 2019

Я довольно новичок на сцене разработки Angular и начал с простой формы заказа такси.Я добавляю поле выбора материала с массивом с двумя такими свойствами: 

{value: 24, view: '1010 - Vienna'}

, который работает хорошо, но когда я отправляю форму и проверяю, поле console.log zip равно 24. Как я могуДобиться, чтобы ngModel связывался со свойством view моего выпадающего меню?

Большое спасибо!

Ожидаемое поведение:

  • Когда я отправляю форму через onSubmit (), свойство zip формыобъект должен вывести «1010 - Innere Stadt», а не 24

Я хочу включить это в объект Form, созданный ngForm, затем я мог бы напрямую отправить его в мой Express API для сохранения в базе данных,Изображение прикреплено ниже

Изображение в объекте формы

app.component.html 

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

<mat-select placeholder="Postleitzahl" [(ngModel)]="zipValue" name="zip">
    <mat-option *ngFor="let z of zip" [value]="z.value" >{{z.view}} 
    </mat-option>
  </mat-select>

    <button type="submit">submit</button>

</form>

приложение.component.ts 

import { Component, OnInit, OnChanges } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-form-de',
  templateUrl: './form-de.component.html',
  styleUrls: ['./form-de.component.css']
})


export class FormDeComponent {

zip = [
    { view: '1010 - Innere Stadt', value: 24 },
    { view: '1020 - Leopoldstadt', value: 25 },
]

 onSubmit(form: NgForm) {
    console.log(form.value);
  }
}

1 Ответ

0 голосов
/ 09 июня 2019

Внести следующие изменения в компонент - Переменная zipValue.Установите его начальное значение для одного из вас zip значений массива [также неплохо иметь неопределенное значение) - 

export class FormDeComponent {

zipValue;

zip = [
    { view: '1010 - Innere Stadt', value: 24 },
    { view: '1020 - Leopoldstadt', value: 25 },
]

ngOnItit() {

}

 onSubmit(form: NgForm) {
    console.log(form.value.zip);
    console.log(this.zipValue);//you should see mat-select selected value; which would be an object.
  }
}

В шаблоне сделайте следующее изменение -

РЕДАКТИРОВАТЬ 1- Используйте z.view в mat-option, как это [Это изменение для - когда вам было нужно "view" в zip 

<mat-option *ngFor="let z of zip" [value]="z.view" >{{z.view}} 
    </mat-option>

EDIT 2 - Используйте z вmat-option вроде этого [Это изменение для - когда вам нужны оба view and value в zip;Это то же самое, что и мое самое первое решение] 

<mat-option *ngFor="let z of zip" [value]="z" >{{z.view}} 
    </mat-option>

В "Edit 2" при нажатии кнопки console.log(form.value.zip); вернет {view: '1010 - Innere Stadt', value: 24}, который имеет и значение, и вид.Пока пользователь увидит "view" в Mat-Select. Это стандартный способ реализации Mat-Select.

, см. Следующий стек: https://stackblitz.com/edit/angular-cvjpxq?file=app/select-overview-example.ts

Если вы все еще хотите, чтобы form.zip.value вернул "1010 - Innere Stadt" иВы хотите, чтобы "value", тогда "РЕДАКТИРОВАТЬ 1" - это решение, и тогда вам нужно будет найти этот объект в вашем zip-массиве следующим образом - 

const foundZip = this.zip.find(z => z.view === form.value.zip)
...