I have not declared an email control in the HTML file, but I have declared it in my form group. I want to set the email value that is receiving in the customers to the email control.
<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>
A TypeScript file that is receiving a customer object
I have to dynamically change the email field according to the change in select bar value
@Input() customers;
// customers=[{firstName:'rishabh',lastName:'tripathi',email:'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d191f041e050c0c0d052d0a000c0401430e0200">[email protected]</a>',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)
});