Question

我对Angular开发领域很陌生，并且从简单的出租车预订表开始。我将Material-Select字段附加到具有2个这样的属性的数组中：

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

效果很好，但是当我提交表单并检查console.log字段zip等于24时，如何实现ngModel绑定到下拉菜单的view属性？

非常感谢您！

预期行为：

当我通过onSubmit（）提交表单时，表单对象的属性zip应该输出“ 1010-Innere Stadt”而不是24

我想将其包含在ngForm已创建的Form对象中，然后可以将其直接发送到Express API以将其存储在数据库中。图片附在下面

Image to Form Object

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>

app.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);
  }
}

Answer 1

进行以下组件更改- 有一个变量zipValue。将其初始值设置为您的zip数组值之一[也可以使用undefined]-

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-在像这样的mat-option中使用z.view [此更改是-当需要"view"时使用zip

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

编辑2-在像这样的mat-option中使用z [此更改是-当您同时需要两个view and value的zip时；这与我的第一个解决方案相同]

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

在“编辑2” 中，点击按钮，console.log(form.value.zip);将返回{view: '1010 - Innere Stadt', value: 24}，其中既包含值又包含视图。用户将在Mat-Select中看到"view"。 这是实现Mat-Select的标准方法。

请参阅以下堆叠闪电战-https://stackblitz.com/edit/angular-cvjpxq?file=app/select-overview-example.ts

如果您仍然希望form.zip.value返回"1010 - Innere Stadt"并且希望"value"，那么“ EDIT 1” 是解决方案，那么您将必须找到像这样在您的zip数组中添加对象-

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

如何将Angular-Material Select字段的显示值绑定到ngModel

1 个答案: