如何以反应形式为未声明的控件赋值？

Question

我没有在 html 文件中声明电子邮件控件，但我已经在我的表单组中声明了它。我想将 customers 中接收的电子邮件值设置为电子邮件控件。

<form class="form-row" [formGroup]="form" >
      <div class="col-md-3">
        <label>Email Report</label>
          <mat-radio-group class="mb-3 d-block" formControlName="emailReport"  (change)="emailReport = $event.value;emitDataAndValidity()">
              <mat-radio-button [checked]="!emailReport" value="false">No
              </mat-radio-button>
              <mat-radio-button [checked]="emailReport" value="true">Yes
              </mat-radio-button>
          </mat-radio-group>
        </div>
        <div class="col-md-5">
          <label>Customers</label>
          <mat-select placeholder="--Select--" class="form-control" disableOptionCentering formControlName="name" >
              <mat-option [value]="customer.firstName+' '+customer.lastName" id="customer.id" *ngFor="let customer of customers.clientManager">
                  {{customer.firstName +' '+customer.lastName }}
              </mat-option>
              <mat-option [value]="customer.email" id="customer.id" *ngFor="let customer of customers.supervisor">
                  {{customer.firstName +' '+customer.lastName }}
              </mat-option>
          </mat-select>
      </div>
        <div class="ml-md-auto col-md-3">
          <label>Type</label>
          <mat-select placeholder="--Select--" class="form-control" disableOptionCentering formControlName="type" >
            <mat-option value='DAILY'> DAILY </mat-option>
            <mat-option value='WEEKLY'> WEEKLY</mat-option>
            <mat-option value='MONTHLY'> MONTHLY </mat-option>
        </mat-select>
        </div>
      </form>

正在接收客户对象的打字稿文件

我必须根据 select-栏值

的变化动态更改电子邮件字段

 @Input() customers;
// customers=[{firstName:'rishabh',lastName:'tripathi',email:'trishabh@gmail.com',type:"Daily"}]

ngOnInit() {
        this.form = this.fb.group({
          emailReport:[false,Validators.required],
          name : ['',Validators.required],
          email:[''],
          type: ['',Validators.required]
       },{updateOn: 'change'});

      this.form.valueChanges.subscribe(value =>{
       console.log(value)

    });

Answer 1

handlingSubcription: Subscription
constructor() {
this.form = this.fb.group({
          emailReport:[false,[Validators.required]],
          name : ['',[Validators.required]],
          email:['',[]],
          type: ['',[Validators.required]]
 });
}

ngOnInit() {
this.handlingSubcription = this.form('name').valueChanges.subscribe(() => {
  if (this.customers[0].hasOwnProperty('email'))
   this.form('email').setValue('jhondoe@gmail.com');
  }
})

ngOnDestroy() {
 this.handlingSubcription.unsubscribe()
}

Answer 2

<div class="col-md-5">
      <label>Customers</label>
      <mat-select placeholder="--Select--" class="form-control" disableOptionCentering formControlName="name" (selectionChange)="onSelectionChange($event)">
          <mat-option [value]="customer" id="customer.id" *ngFor="let customer of customers.clientManager">
              {{customer.firstName +' '+customer.lastName }}
          </mat-option>
      </mat-select>
  </div>

您可以在 mat-select 上监听事件 selectionChange。并在 email 表单控件上设置电子邮件值。

onSelectionChange(customer) {
  this.form.get('email').setValue(customer.email);
}

如何以反应形式为未声明的控件赋值？

How to assign a value to a non declared control in reactive form?

forms

typescript

angular

angular-reactive-forms