CODEWITHSUNDEEP
angular
Sarath Mohandas
Sarath Mohandas

Reputation: 536

Cannot bind Select Options in Angular

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.

Upvotes: 1

Views: 1294

Answers (1)

MoxxiManagarm
MoxxiManagarm

Reputation: 9124

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>

Upvotes: 1

Related Questions