微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

反应形式-如何用对象填充垫选择控件?

如何解决反应形式-如何用对象填充垫选择控件?

我想建立一个可重复使用的表单来创建和编辑客户。

该表格包括选择以分配客户顾问的选项。我想保存一个完整顾问的对象,这就是为什么我将一个完整对象分配给[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 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?