CODEWITHSUNDEEP
angularangular-reactive-forms
Stef Van Looveren
Stef Van Looveren

Reputation: 332

Way to dynamically build up form controls with both value and label

I have just started using reactive forms. The use case is that I get my filters from an API, then I dynamically build up my form controls like this. The constructor:

constructor(
  private fb: FormBuilder,
) {
  this.typesArray = this.fb.group({});
  this.form = this.fb.group({
    typesArray:  this.typesArray,
  });
}

// a bit further I do this after finishing an API call:
response.forEach((type: any) => {
  (this.form.get('typesArray') as FormGroup).addControl(type.id, new FormControl(false));
});

This results in a row of checkboxes:

<div *ngFor="let Type of objectKeys(typesArray.controls)">
    <ion-checkbox class="ion-no-margin" type="checkbox" [formControlName]="Type"></ion-checkbox>
    <ion-label class="ion-no-margin" class="ml-2">**HERE I WANT THE LABEL**</ion-label>
</div>

The value is binded by [formControlName], which is the type Id. Is there a way to also add the label (type.title for example "Book", "DVD") to the form controls?

I would like to prevent having to build up a separate array with my values and labels just to show the correct label.

Upvotes: 3

Views: 3021

Answers (1)

John Malkoln
John Malkoln

Reputation: 461

You don't need separate array. Title or any other field can be resolved by index from original filters array.

Working sample:

export interface Filter {
    id: number;
    title: string;
    selected: boolean;
}

@Component({
    selector: 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls: ['./demo.component.scss'],
})
export class DemoComponent implements OnInit {

    filters: Filter[] = [{ id: 1, title: 'Book', selected: true }, { id: 2, title: 'DVD', selected: false }];
    form: FormGroup;

    get typesArray(): FormArray {
        return this.form.get('typesArray') as FormArray;
    }

    constructor(private readonly formBuilder: FormBuilder) {}

    ngOnInit(): void {
        this.form = this.formBuilder.group({
            typesArray: new FormArray([]),
        });

        this.filters.forEach((filter) => {
            this.typesArray.push(this.formBuilder.control(filter.selected));
        });

        this.typesArray.valueChanges.subscribe((checkboxValues: boolean[]) => {
            const selectedFilters = checkboxValues
                .map((selected, index) => {
                    return { ...this.filters[index], selected };
                })
                .filter((filters) => filters.selected);

            console.log(selectedFilters);
        });
    }
}

<table>
    <tbody>
    <tr *ngFor="let control of typesArray.controls; let i = index;">
        <td>{{ filters[i].title }}</td>
        <td><input type="checkbox" [formControl]="control"></td>
    </tr>
    </tbody>
</table>

Upvotes: 3

Related Questions