Include a control within a form based on the Observable response

Question

Include a control within a form based on the Observable response

I am looking to enhance my form by adding a control of array type, but I need to wait for the return of an Observable before mapping the values and integrating them into the form.

The issue with the current code is that it inserts an empty array control even if there is no observable data available.

My goal is to ensure that all observable data has been returned before adding the control. I want to retrieve the last value within subscribe and then insert the control based on the number of users returned.

In my HTML, I want to display checkboxes with the names of users, indicating whether they are tagged or not. This information will be stored in the array along with the user's ID and a boolean value.

component.ts

    users$ = this._store.select(usersSelectors.getUsers);

    this.myForm = this._formBuilder.group({
        // .... controls
    });

    this.users$.pipe(
        filter((data) => !!data),
        map(users => this._formBuilder.array(users.map(() => new FormControl(false))))
    ).subscribe(usersArray => 
        this.myForm.addControl('users', usersArray)
    );

component.html

<div class="col-md-3">
  <label for="users">Users</label>
  <div id="users" class="row">
    <div class="checkbox" class="col-sm-4"
      formArrayName="users"
      *ngFor="let item of myForm.get('users').controls; let i = index" >
      <label class="checkbox-inline">
        <input type="checkbox" [formControlName]="i"> {{ users$[i].name }}
      </label>
    </div>

Return from users$:

0: {subscriber: false, avatar: "", name: "Paul", id: "eXrrdOfmUGYHFIOVCWjBnAO7PZ52" …}
1: {subscriber: true, avatar: "", name: "Will", id: "NoQMVGnCA6VPc42ksIa6AqZZNWL2" …}

When marking the user, the 'users' control should look like this:

users: [
{eXrrdOfmUGYHFIOVCWjBnAO7PZ52: false}
{NoQMVGnCA6VPc42ksIa6AqZZNWL2: true}
]

angular typescript observable angular-reactive-forms

Answer 1

Answer №1

To start, you can initialize the form and dynamically add controls based on the Observable value. Here's an example of how this can be achieved:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  users;
  form: FormGroup;

  constructor(
    private http: HttpClient,
    private fb: FormBuilder
  ) {}

  get usersForm() {
    return (<FormArray>this.form.get('users')).controls;
  }

  ngOnInit() {

    this.form = this.fb.group({
      users: this.fb.array([])
    });

    this.http.get('https://jsonplaceholder.typicode.com/users')
      .subscribe(users => {
        this.users = users;
        this.users.forEach(user => {
          if(typeof(user) == typeof(true)) this.usersForm.push(this.fb.control([user.tagged]));
        });
        console.log('Users Form: ', this.usersForm);
      });
  }
}

Feel free to explore a Demo on StackBlitz showcasing the implementation.

Answer 2

To start, you can initialize the form and dynamically add controls based on the Observable value. Here's an example of how this can be achieved:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  users;
  form: FormGroup;

  constructor(
    private http: HttpClient,
    private fb: FormBuilder
  ) {}

  get usersForm() {
    return (<FormArray>this.form.get('users')).controls;
  }

  ngOnInit() {

    this.form = this.fb.group({
      users: this.fb.array([])
    });

    this.http.get('https://jsonplaceholder.typicode.com/users')
      .subscribe(users => {
        this.users = users;
        this.users.forEach(user => {
          if(typeof(user) == typeof(true)) this.usersForm.push(this.fb.control([user.tagged]));
        });
        console.log('Users Form: ', this.usersForm);
      });
  }
}

Feel free to explore a Demo on StackBlitz showcasing the implementation.

Include a control within a form based on the Observable response

Answer №1

Similar questions

Using the expect statement within a Protractor if-else block

The query fails to retrieve results for the specified date and the beginning of the month

Unable to show the input's value

Leveraging ZOD's discriminatedUnion() method to differentiate among three different forms

Lint found an issue: The variable 'post' has been defined but is not being utilized in the code

Limit the covariance of properties in generic arguments

Why won't the sound play on the button with the picture?

Add the item to the array and then use the *ngFor directive to iterate

The 'id' property is not found within the 'Order[]' type

Conceal the choice when aria-expand is in a deactivated state

Unable to load the .js file within the Angular module

The latest version of Angular, Angular 16, brings along its own set of challenges

Unexpected token error in TypeScript: Syntax mistake spotted in code

Error encountered during sequelize synchronization: SQL syntax issue detected near the specified number

Is there a way to program a function that can automatically trigger or refresh an HTTP POST method?

Initiating a GET request to execute an SQL query with specified parameters

The use of throwError(error) has been phased out, however, no replacement has been introduced for the Error(HttpErrorResponse)

Having trouble with npm install on an Angular project? It seems to be failing with an ECONNREFUSED error while trying to

Form with checkboxes in a Next.js and Typescript application

Transforming an Image URL into base64 format using Angular