如何解决反应形式-如何用对象填充垫选择控件?
我想建立一个可重复使用的表单来创建和编辑客户。
该表格包括选择以分配客户顾问的选项。我想保存一个完整顾问的对象,这就是为什么我将一个完整对象分配给[value]属性的原因。
问题是当我尝试编辑数据时-我只能为客户的姓名和电子邮件设置值,但无法为分配的顾问程序的选择控制设置合适的值。
customer-form.componetnt.html
<form [formGroup]="form">
<div class="col-12 col-md mb-2">
<mat-form-field class="w-100">
<mat-label>Customer Name</mat-label>
<input matInput formControlName="name" type="text" />
</mat-form-field>
</div>
<div class="col-12 col-md mb-2">
<mat-form-field class="w-100">
<mat-label>Email</mat-label>
<input matInput formControlName="email" type="text" />
</mat-form-field>
</div>
<div *ngIf="staffMembers$ | async as staffMembers" class="col-12 col-md-3">
<mat-form-field appearance="fill" class="w-100">
<mat-label>Advisor</mat-label>
<mat-select formControlName="advisor">
<mat-option *ngFor="let s of staffMembers" [value]="s">
{{ s.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>
customer-form.component.ts
import { Component,Input,OnInit } from '@angular/core';
import {
FormBuilder,FormControl,FormGroup,Validators,} from '@angular/forms';
import { Observable } from 'rxjs';
import { User } from 'src/app/shared/models/user';
import { UseRSService } from 'src/app/shared/services/users.service';
@Component({
selector: 'customer-form',templateUrl: './customer-form.component.html',styleUrls: ['./customer-form.component.scss'],})
export class CustomerFormComponent implements OnInit {
form: FormGroup;
staffMembers$: Observable<User[]>;
constructor(
private formBuilder: FormBuilder,private useRSService: UseRSService,private authService: AuthService,) {}
ngOnInit(): void {
this.staffMembers$ = this.useRSService.getStaff();
this.buildForm();
}
//this method is called in edit-customer.component.ts
setCustomer(customer: User) {
console.log(customer); //ok,I received the customer object here and I'm ready to set form values using patchValue method
const { id,...customerData } = customer;
this.form.patchValue(customerData);
}
private buildForm() {
this.form = this.formBuilder.group({
name: ['',{ validators: [Validators.required] }],email: ['',advisor: ['',});
}
}
谢谢您的帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。