Selected option Angular 4, ngValue don't work

Question

Im trying to have a selected option when I receive the object workOrder.supplier, I tryed NgValue, ng-selected, compareWith but dont work, I dont know Why... this project use Angular 4. You have another option to I try?

<md-select class="suppliers-list" placeholder="Selecione Sua Empresa" [(ngModel)]="workOrder.supplier" formControlName="supplier" name="supplier" [disabled]="schedulingDisabled" >
      <md-option *ngFor="let supplier of suppliers" [value]="supplier" >
        {{ supplier.corporateName }}                                    
      </md-option>
</md-select>

Edited:

Try this.. this worked for me. Your question is bit unclear of what you are trying to do. In order to clarify remove the disabled property and see.

<md-select formControlName="supplier" [(ngModel)]="workOrder.supplier">
       <md-option *ngFor="let supplier of suppliers" [value]="supplier">{{supplier.displayName}}                                   </md-option>
</md-select>

edited: The TS that get the info

newWorkOrder() {
let newWorkOrder = new WorkOrder();
// se verdadeiro, pega os dados que vieram do Plano de manutenção ou do editar
if (this.workOrderService.getOSCache() !== null && this.workOrderService.getOSCache() !== undefined) {
  this.workOrderService.getOSCache().subscribe(res => {
    newWorkOrder = res;
    this.selectedSupplier = res.supplier;
    if (res.initialDate != null) {
      this.selectedDateInitial = new Date(res.initialDate);
    }
    if (res.finalDate != null) {
      this.selectedDateFinal = new Date(res.finalDate);
    }
    this.workOrderService.clearOSCache();
  });
} else {
  newWorkOrder.initializeWithJSON(this.createForm());
}
return newWorkOrder;

}

Selaka Nanayakkara · Answer 1 · 2020-05-19T03:39:07.480

0

Im still not clear of what you are asking.. I Assume that you want to capture the value in the ts file in selected input in template file.

<md-select formControlName="supplier" [(ngModel)]="workOrder.supplier" (change)="newWorkOrder(selectedSupplier.value)" #selectedSupplier>
       <md-option *ngFor="let supplier of suppliers" [value]="supplier">{{supplier.displayName}}                                   </md-option>
</md-select>

And in your ts file :

newWorkOrder(selectedValue:any) {
  console.log(selectedValue);
}

In this solution I have used something called angular template refferencing. You can read more about it in the official angular documentation here

edited May 19 '20 at 03:39

answered May 15 '20 at 19:19

Selaka Nanayakkara

3,296
1
22
42

Hi, I have a form with the select/option, but in a second time, I use the same code to edit this workOrder and I wanna that appear the previously selected option appear selected. And your code is like the same thing that I did, you only erase somethings at md-select (class, placeholder...) that have some influence? – Anderson Lottermann Thomé May 15 '20 at 21:37
Can you post your full code? Including the TS file.... Its hard to analyze with a small template code. Better if you can provide the stackblitz.. Still im not clear of what you need to archieve – Selaka Nanayakkara May 16 '20 at 06:47
I will see what of the code I can share... But the pricipal question for me, is, why [NgValue] is not working? – Anderson Lottermann Thomé May 18 '20 at 15:12
I have edited solution accordingly.. I assume that you are trying to capture the value in ts file which is selected in input selection – Selaka Nanayakkara May 19 '20 at 03:40
yes, I tested with select and option and works fine but with md-select e md-option not – Anderson Lottermann Thomé May 19 '20 at 18:27

Selected option Angular 4, ngValue don't work

1 Answers1