"Disabling a FormControl within a FormArray in Angular 4: A Step-by-

Question

"Disabling a FormControl within a FormArray in Angular 4: A Step-by-

I've come up with a code snippet below that I thought would disable the FormControl in a FormArray.

some.component.html

<form [formGroup]="testForm">
    <div *ngFor="let num of countArr">
        <input type="text" formNameArray="arrs">
    </div>
</form>

some.component.ts

countArr = [1, 2, 3, 4, 5];
count = 5;
arrs;
testForm: FormGroup;

this.testForm = this.formBuilder.group(
    arrs: this.formBuilder.array([])
);

this.arrs = this.testForm.get('arrs');

for (let i = 0; i < this.count; i++) {
    this.arrs.insert(i, new FormControl({value: '', disabled: true}));
}

However, after running the loop, I checked the form and noticed that nothing had been disabled. Can you please point out where I might be going wrong? :-)

Your assistance is greatly appreciated!!! :-)

javascript angular typescript angular-forms angular-formbuilder

Answer 1

Answer №1

To start, this is the proper structure for your HTML component:

<form [formGroup]="testForm">
    <div formArrayName="arrs">
        <div class="form-group" *ngFor="let arrItem of testForm.get('arrs').controls; let i = index">
            <input type="text" class="form-control" [formControlName]="i">
        </div>
    </div>
</form>

There's no need to loop through a random count variable in your HTML. Instead, iterate over your added controls.

You might be wondering, "Which controls specifically? They haven't been added yet!"

This is where you dynamically add those controls in the ngOnInit method:

ngOnInit() {
    this.testForm = new FormGroup({
      arrs: new FormArray([])
    }
    );

    for (let i = 0; i < this.count; i++) {
      const control = new FormControl(null, Validators.required);
      (<FormArray>this.testForm.get('arrs')).push(control);
    }

    this.disableInputs();
}

Here is the correct syntax for initializing the FormArray, creating an initial control inside the for loop, and adding the new control to your array.

Important: there is a call to the disableInputs() function. This is where you programmatically disable your inputs as well:

  disableInputs() {
    (<FormArray>this.testForm.get('arrs'))
      .controls
      .forEach(control => {
        control.disable();
      })
  }

Here is a functional example: stackblitz

Answer 2

To start, this is the proper structure for your HTML component:

<form [formGroup]="testForm">
    <div formArrayName="arrs">
        <div class="form-group" *ngFor="let arrItem of testForm.get('arrs').controls; let i = index">
            <input type="text" class="form-control" [formControlName]="i">
        </div>
    </div>
</form>

There's no need to loop through a random count variable in your HTML. Instead, iterate over your added controls.

You might be wondering, "Which controls specifically? They haven't been added yet!"

This is where you dynamically add those controls in the ngOnInit method:

ngOnInit() {
    this.testForm = new FormGroup({
      arrs: new FormArray([])
    }
    );

    for (let i = 0; i < this.count; i++) {
      const control = new FormControl(null, Validators.required);
      (<FormArray>this.testForm.get('arrs')).push(control);
    }

    this.disableInputs();
}

Here is the correct syntax for initializing the FormArray, creating an initial control inside the for loop, and adding the new control to your array.

Important: there is a call to the disableInputs() function. This is where you programmatically disable your inputs as well:

  disableInputs() {
    (<FormArray>this.testForm.get('arrs'))
      .controls
      .forEach(control => {
        control.disable();
      })
  }

Here is a functional example: stackblitz

Answer 3

Answer №2

To activate Dynamic Input functionality, follow these steps:

form: FormGroup;
  orders = [
    { id: 100, name: 'order 1' },
    { id: 200, name: 'order 2' },
    { id: 300, name: 'order 3' },
    { id: 400, name: 'order 4' }
  ];

  constructor(private formBuilder: FormBuilder) {
    const controls = this.orders.map(c => new FormControl(''));

    this.form = this.formBuilder.group({
      orders: new FormArray(controls)
    });

    this.form.get('orders').controls
      .forEach(control => {
        control.disable();
      })
  }

Your HTML code should resemble the following structure:

<form [formGroup]="form" >
  <label formArrayName="orders" *ngFor="let order of form.controls.orders.controls; let i = index">
    <input type="text" [formControlName]="i">
    {{orders[i].name}}
  </label>
</form>

Answer 4

To activate Dynamic Input functionality, follow these steps:

form: FormGroup;
  orders = [
    { id: 100, name: 'order 1' },
    { id: 200, name: 'order 2' },
    { id: 300, name: 'order 3' },
    { id: 400, name: 'order 4' }
  ];

  constructor(private formBuilder: FormBuilder) {
    const controls = this.orders.map(c => new FormControl(''));

    this.form = this.formBuilder.group({
      orders: new FormArray(controls)
    });

    this.form.get('orders').controls
      .forEach(control => {
        control.disable();
      })
  }

Your HTML code should resemble the following structure:

<form [formGroup]="form" >
  <label formArrayName="orders" *ngFor="let order of form.controls.orders.controls; let i = index">
    <input type="text" [formControlName]="i">
    {{orders[i].name}}
  </label>
</form>

Answer 5

Answer №3

Utilize the formArray control within the loop to assign it to each input:

<form [formGroup]="testForm">
    <div formArrayName="arrs">
        <div *ngFor="let num of countArr; let idx = index">
            <input type="text" [formControlName]="idx" [attr.disabled]="true">
        </div>
    </div>
</form>

You may find more information in this article:

https://angular.io/guide/reactive-forms#display-the-formarray

Answer 6

Utilize the formArray control within the loop to assign it to each input:

<form [formGroup]="testForm">
    <div formArrayName="arrs">
        <div *ngFor="let num of countArr; let idx = index">
            <input type="text" [formControlName]="idx" [attr.disabled]="true">
        </div>
    </div>
</form>

You may find more information in this article:

https://angular.io/guide/reactive-forms#display-the-formarray

Answer 7

Answer №4

Deactivating the FormControls within a FormArray can be achieved effortlessly using the "reset" method.

this.formGroupHere.get(['formArrayHere']).reset({
        disableFields: {
            formControlHere: true,
            otherFormControl: true
        }
    }
);

Answer 8

Deactivating the FormControls within a FormArray can be achieved effortlessly using the "reset" method.

this.formGroupHere.get(['formArrayHere']).reset({
        disableFields: {
            formControlHere: true,
            otherFormControl: true
        }
    }
);

Answer 9

Answer №5

To achieve this, you can disable the formControl during initialization or updating by following these steps:

In this scenario, let's assume that testForm represents the formGroupName, arrs is the FormArrayName, and inputValue corresponds to the formControlName

(<FormArray>this.testForm.get('arrs')).push(new FormGroup({
  'inputValue': new FormControl({ value: '', disabled: true }, Validators.required),
}));

Please note that disabling the form input will prevent submission. Alternatively, you can utilize the readonly property as demonstrated below.

<input readonly="readonly" type="text" />

This method allows you to retrieve input values from the form effectively.

Refer to the source for more information on using the "readonly" attribute.

Answer 10

To achieve this, you can disable the formControl during initialization or updating by following these steps:

In this scenario, let's assume that testForm represents the formGroupName, arrs is the FormArrayName, and inputValue corresponds to the formControlName

(<FormArray>this.testForm.get('arrs')).push(new FormGroup({
  'inputValue': new FormControl({ value: '', disabled: true }, Validators.required),
}));

Please note that disabling the form input will prevent submission. Alternatively, you can utilize the readonly property as demonstrated below.

<input readonly="readonly" type="text" />

This method allows you to retrieve input values from the form effectively.

Refer to the source for more information on using the "readonly" attribute.

"Disabling a FormControl within a FormArray in Angular 4: A Step-by-

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is there a way for me to retrieve the header values of a table when I click on a cell?

The request for XMLHttpRequest has been restricted from accessing ASP.NET CORE 2.2.0 with Angular 8 and signalr1.0.0 due to a failure in the CORS policy (Access-Control-Allow-Origin)

Creating auto serial numbers in the MERN stackWould you like to know how to

Code Not Functioning on Website Despite Working in Console

Displaying a JQuery loading image on a webpage for a designated amount of time

In a Django template, implement a checkbox feature in the list view to select multiple objects. Retrieve all selected checkbox objects for each pagination and display them in

Uploading information to a server using Angular.js

What is the process for configuring simultaneous services on CircleCI for testing purposes?

Retrieve the element that triggered the event listener within Nuxt

Forward after asynchronous JavaScript and XML (AJAX)

Error: The function window.intlTelInput is not recognized within the ReactJS framework

PHP array utilized in a dynamic dropdown menu

Is the CSS scale activated by mouseover or click?

JavaScript Popup prompting user on page load with option to redirect to another page upon clicking

Rails javascript not triggering even after the page is loaded with `page:load`

Discover the best way to retrieve attribute values using jQuery

Using the Jquery accordion function within google maps is limited to running only one time

Issue with printing JavaScript value using Selenium_ASSUME_WE_NOT have any changes in the content

Form featuring a mandatory checkbox that must be selected in order to proceed; failure to do so will result in an

Animating toasts in Bootstrap