Binding Date value change Angular-CodePudding

I wanted to achieve that once i click the different date my data input will be change depending that date they had. but when i tried the trigger but it wont change any.

asOfDate: any;

    ngOnInit(){
        this.fg = this.fb.group({
         arrayForm:this.fb.array([this.CreateList()])
        })
      }
 CreateList():FormGroup{
  return this.fb.group({
    total:[]
    name:[]
    remarks:[],
    asOfDate:[new Date().toISOString().substring(0,10)]
})
  }
    
    openDialog(index: number){
        const dialogRef = this.dialog.open(DialogComponent,{});
        dialogRef.afterClosed().subscribe((result) => {
          (this.fg.get('arrayForm') as FormArray).at(index).patchValue(result)
          this.asOfDate = result;
        });
      }
    
    dateTrigger(trigger:MatSelectChange){
        this.asOfDate = trigger.value;
      }

 <td>
            <input matInput type="date" formControlName="asOfDate"  (selectionChange)="dateTrigger($event)">
         </td>

CodePudding user response：

Try to use (ngModelChange)='dateTrigger($event)'. Best regard!

CodePudding user response：

you can listen to the valueChanges event if you want to use reactive form features

ngOnInit(){
  this.fg = this.fb.group({
   arrayForm:this.fb.array([this.CreateList()])
  })

  merge(...this.fg.get('arrayForm').controls.map(control => control.valueChanges))
    .subscribe(item => this.asOfDate = item.asOfDate);
}

CodePudding user response：

You should use change event (on blur) or input event (on keydown) in order to receive events from inputs.

<input matInput type="date" formControlName="asOfDate"  (input)="dateTrigger($event)">

CodePudding user response：

It's because this.asOfDate is not connected to your form as far I can see.

You have to update the value on the formGroup via patchValue:

dateTrigger(trigger:MatSelectChange){
   this.asOfDate = this.fg.get('arrayForm').at(0).get('asOfDate').patchValue(trigger.value);
}