Angular Material Select - How to set value programatically?-CodePudding

I have a form with a select input as a component - so the form component holds children components for each field type (text, select, textarea, etc.). I want to be able to load data and display it in the form . The problem is with the material-select, i can't set value , i've read about using [compareWith] directive - but i don't know how to trigger it. To simulate sending the data to the i've created a button that changes the @Input value in the Select Component and by that - triggers the [compareWith] - but i guess it's not the solution.

Here is the main component structure :

 <form [formGroup]="contactForm" >
    <mat-form-field  appearance="fill">
      <mat-label>Full Name </mat-label>
      <input matInput placeholder="Full Name" value="" formControlName="fullName">
    </mat-form-field>
  <br>
    <mat-form-field  appearance="fill">
      <mat-label>Email </mat-label>
      <input type = "email" matInput placeholder="Email" value="" formControlName="email">
    </mat-form-field>
    <br>
    // select component *
    <select-multiple-example [formObj]="contactForm" [selectedValue]="selectedVal">
    </select-multiple-example>
  </form>
  
<button mat-raised-button color="primary" (click)="setSelectValue()">set value</button>

I'm adding 2 examples for better understanding of the issue:

The first is my attempt to trigger the select-multiple-example and set a value from it's input
The second is a working example of setting a value ad a standalone component

Example of the problem

Example of the selection working as an independent component

CodePudding user response：

If I understood your question correctly, you want to check out the ngOnChanges() lifecycle function (onInit, onDestroy, onChange, etc...). This way you will be able to see the changes in the parent component and react on it. Let me know if I understood well your issue!

CodePudding user response：

Oh ok, basically you want to trigger an event on child component whenever an input value changes on parent.

First of all you should get a reference of your child component from your parent to access it within code with ViewChild(ren), then if you click on button, you should trigger an event, or a function that changes the value inside the child component.

But, this can also be achieved with the examples you provided using ngOnChanges.

The first problem here is that you're trying to access an input value inside constructor. You can't do that. constructors are typescript things, @Inputs are Angular things. Your input variable will be available on ngOnInit.

So, move formObj assignation to ngOnInit

  ngOnInit() {
    this.myprgrmFormControl = this.formObj
  }

Then, you can access changed variable inside ngOnChanges

  ngOnChanges(changes: SimpleChanges) {
    this.myprgrmFormControl.get('program').setValue([changes.selectedValue.currentValue])
  }