Cannot bind Select Options in Angular

Question

I'm trying to bind this data to DropDown or Select options. The value is not binding to the form controller. this problem is extention of :

How to load ngOninit after binding the api's?

Component.html

 <div class="col-md-6">
     <label class="col-md-6 col-form-label padding-bottom-Mini">Rule Type</label>
        <div class="col-md-12">
            <select class="form-control" formControlName="ruleTypeName">
                <option [ngValue]="null" disabled>Choose your Rule Types</option>
                 option *ngFor="let rule of ruleTypes" [value]="rule">  {{ rule.ruleTypeName }}</option>
            </select>
        </div>
</div>

Component.ts

   public ngOnInit(): void {    

 if(this.data.isNew === true) {
            this.editForm =   this.formBuilder.group({
                    id              : new FormControl(),
                    name            : new FormControl('', Validators.required),
                    description     : new FormControl(''),
                    libraryFile     : new FormControl(''),       
                    className       : new FormControl(''),
                    ruleTypeName    : new FormControl(''),
                    groupTypeName   : new FormControl('')
                });
            } else {
                this.editForm =   this.formBuilder.group({
                    name            : new FormControl(this.data.editDataItem.name, Validators.required),
                    description     : new FormControl(this.data.editDataItem.description),
                    libraryFile     : new FormControl(this.data.editDataItem.libraryFile),       
                    className       : new FormControl(this.data.editDataItem.className),
                    ruleTypeName    : new FormControl(this.data.editDataItem.ruleTypeName),
                    groupTypeName   : new FormControl(this.data.editDataItem.groupTypeName)
                });
            }
    this.ruleTypeName=this.getRuleTypes(this.data);


   }

public getRuleTypes(data:any): any{
        this.ruleService.readRuleTypes().subscribe((res:any)=>{
            this.ruleTypes=res;
            console.log(this.ruleTypes);
            if(data.isNew === true){
                this.ruleTypeName = null;
            }  else {
                if (this.ruleTypes[this.ruleTypes.findIndex(s => s.ruleTypeName === data.editDataItem.ruleType)] !== undefined) {
                    this.ruleTypeName = this.ruleTypes[this.ruleTypes.findIndex(s => s.ruleTypeName === data.editDataItem.ruleType)];
                   // this.editForm.controls["ruleTypeName"].setValue(this.ruleTypeName.ruleTypeName);
                }
            }  
            this.editForm.controls["ruleTypeName"].setValue(this.ruleTypeName.ruleTypeName);               
        });
        
    }

Dont know what I'm missing here...Please help with relevant datas.

I tried to reproduce your behavior with a simple snippet, but it is working for me. Here is the stackblitz: stackblitz.com/edit/angular-ivy-knpkzv?file=src/app/…. Can you maybe share a stackblitz showing the not working behavior? PS.: Instead of if (this.ruleTypes[this.ruleTypes.findIndex(s => s.ruleTypeName === data.editDataItem.ruleType)] !== undefined) { say if (this.ruleTypes.some(s => s.ruleTypeName === data.editDataItem.ruleType)) { — MoxxiManagarm
– MoxxiManagarm, Commented Nov 13, 2020 at 14:25
Hi MoxxiManagarm,Would you check this eg. stackblitz.com/edit/…, Make little bit change in Array, arraytype etc. — Sarath Mohandas
– Sarath Mohandas, Commented Nov 13, 2020 at 14:55
Your select stores the value option, but your formcontrol has a string value. You need to change the [value] tag to [value]="option.Name". See here: stackblitz.com/edit/angular-ivy-n3xpfx?file=src/app/… — MoxxiManagarm
– MoxxiManagarm, Commented Nov 13, 2020 at 15:08
@bahadrdsr, which line.? <form [formGroup]="editForm"> <select formControlName="myValue"> <option *ngFor="let option of options" [value]="option"> {{ option.Name }} </option> </select> </form> — Sarath Mohandas
– Sarath Mohandas, Commented Nov 13, 2020 at 15:09

MoxxiManagarm · Accepted Answer · 2020-11-13 15:09:57Z

1

You need to change your value attribute in your template.

<div class="col-md-6">
     <label class="col-md-6 col-form-label padding-bottom-Mini">Rule Type</label>
        <div class="col-md-12">
            <select class="form-control" formControlName="ruleTypeName">
                <option [ngValue]="null" disabled>Choose your Rule Types</option>
                 <option *ngFor="let rule of ruleTypes" [value]="rule.ruleTypeName">  {{ rule.ruleTypeName }}</option>
            </select>
        </div>
</div>

answered Nov 13, 2020 at 15:09

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot bind Select Options in Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related