如何将角度材质选择字段的显示值绑定到ngModel
我是Angular开发领域的新手，从一个简单的出租车预订表单开始。我附加了一个Material-Select字段和一个Array，它有两个属性，如下所示：
{value: 24, view: '1010 - Vienna'}这可以很好地工作，但是当我提交表单并检查console.log字段zip等于24时。我如何实现ngModel绑定到我的dropdown的视图属性？
非常感谢!
预期行为：
- 当我通过onSubmit()提交表单时，表单对象的属性压缩应该输出"1010 - Innere Stadt“，而不是24
我希望将其包含在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>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);
}
}回答 1
Stack Overflow用户
发布于 2019-06-09 21:42:10
在组件中进行以下更改-拥有一个变量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.
}
}在模板中进行以下更改-
EDIT 1 - Use z.view in mat-像这样的选项[此更改用于-当您需要压缩文件时使用"view"
<mat-option *ngFor="let z of zip" [value]="z.view" >{{z.view}}
</mat-option>在中编辑2 - Use z in mat-如下所示的选项此更改适用于-当您需要压缩两个view and value时；这与我的第一个解决方案相同
<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}。而用户将在材料选择中看到"view"。这是实现Mat-的标准方法。
请参阅下面的stackblitz - https://stackblitz.com/edit/angular-cvjpxq?file=app/select-overview-example.ts
如果您仍然希望form.zip.value返回"1010 - Innere Stadt"，并且您想要"value"，那么“Edit1”是解决方案，然后您必须在压缩数组中找到该对象，如下所示-
const foundZip = this.zip.find(z => z.view === form.value.zip)https://stackoverflow.com/questions/56514831
复制相似问题