Setting default value of HTML select in a child component with data from API call

Question

I have a multi-component form that I want to pre-fill with data from an API call. The data populates correctly for every field except for the selected value for the select tag. The value is correct, it is just not displaying the correct option inside of the select. The rest of the form, made of input fields, fill in with the correct data.

The child component takes in a form group and that is what fills in the fields.

I have tried .setValue, .patchValue, [(ngModel)], etc. I cannot get the default value to display correctly. What am I doing wrong?

child-component.html

<select  [attr.id]="reasonCode"  formControlName="reasonCode" placeholder="Reason Code" style="max-width: 100% !important"
                        no-padding selected>
    <option value="" >Please select reason code</option>
    <option *ngFor="let reasonCode of reasonCodesService.reasonCodes">
                        {{reasonCode}}
                    </option>
</select>

child-component.ts

@Input() newReqForm: FormGroup;

parent-component.html

<div *ngFor="let control of newForm.controls['requisitionItem'].controls; let i = index" style="border: 1px solid black; border-radius: 10px; margin-top: 10px;">
    <edit-items (remove)='onRemove($event)'  [newReqForm]="newForm.controls.requisitionItem.controls[i]" style="padding-bottom: 10px"
                    [index]='i'></edit-items>
</div>

parent-component.ts

 ngOnInit() {
    this.employeeService.loadEmployees();
    this.reasonCodesService.loadReasonCodes();
    this.itemReqId = +this.route.snapshot.paramMap.get('ReqId');

    this.reqService.getRequisition(this.itemReqId).subscribe(response => {
        this.editReq = response;
        console.log("EDIT REQ VVV");
        console.log(this.editReq);
        this.editRI = this.editReq.requisitionItem;
        this.newForm = this.fb.group({
            employee: [this.editReq.employee, Validators.required],
            job: [this.editReq.job, Validators.compose([Validators.pattern("^[0-9]+$")])],
            requisitionItem: this.fb.array([

            ])
        });
        this.arrayControl = <FormArray>this.newForm.controls['requisitionItem'];
        this.editRI.forEach(item => {
            let newItem = this.fb.group({
                item: [item.item, Validators.required],
                quantity: [item.quantity, Validators.compose([Validators.required, Validators.pattern("^[0-9]+$")])],
                reasonCode: [item.reasonCode],
                operation: [item.operation],

            })

            this.arrayControl.push(newItem);
            this.setValidators()
        });
        for (let i = 0; i < this.arrayControl.length; i++) {
            this.arrayControl.controls[i].get('reasonCode').setValue(this.editRI[i].reasonCode);
        }
        this.setValidators();
        console.log(this.editReq);
        this.newReqForm = this.newForm;
    });
}

My node/Angular info:

Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64

EDIT child-component.ts

isSelected(reasonCode) {
    if (reasonCode == this.rc) {
        return reasonCode
    }        
}

What are the values for reasonCodes? Can you add the JSON for them to your question please? — user184994
– user184994, Commented Jul 27, 2018 at 20:13

FK82 · Accepted Answer · 2018-07-27 20:33:33Z

0

You are missing a binding on selected of the selected option (see here). You can set the value of the select using reactive forms but this does not actually select an option.

In other words, you need to add something like [selected]="isSelected(reasonCode)" to option:

<option *ngFor="let reasonCode of reasonCodesService.reasonCodes" [selected]="isSelected(reasonCode)">
                    {{reasonCode}}
                </option>

You can implement isSelected for example by comparing its parameter with the value obtained from the FormGroup reference.

answered Jul 27, 2018 at 20:33

FK82

5,0754 gold badges34 silver badges44 bronze badges

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

4 Comments

Josh Over a year ago

This worked for me. My isSelected(reasonCode) is shown in my question now. Is this all I need to do?

FK82 Over a year ago

Basically yes. Full disclosure: I find reactive forms a bit confusing myself. ; ) So there might be a better solution, which I don't know of. Explicitely binding selected is my work-around for this situation. Btw, your isSelected should ideally return a boolean value.

Josh Over a year ago

Reactive forms are definitely confusing and I appreciate your help. But if the isSelected returns a boolean, would that actually work? I thought the way i have it would put the correct item in place of the function name. So when you select one, it checks to see if it matches the form control, then it is returned, giving the [selected] field a value. i.e. [selected]="Missing Parts"

FK82 Over a year ago

@Josh just try and see! I always passed a boolean, but it may actually be overloaded for strings.

Collectives™ on Stack Overflow

Setting default value of HTML select in a child component with data from API call

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related