Why is my formArray in Angular not validating or updating correctly?

Question

Why is my formArray in Angular not validating or updating correctly?

I'm struggling to implement validation and updating for an array of form fields within my parent form group. Can anyone provide insight on what I might be missing?

My goal is to add a new 'Vendor Line' with multiple form fields and validate each of them individually. Currently, only the outer field of the formGroup is being validated. I want to extend this validation to cover each formArray field as well. My project is built using the ng-zorro framework from Ant. Any help is greatly appreciated.

Below is the code snippet:

new-project.component.html

<!-- Code snippet here -->

new-project.component.ts

// TypeScript code here

angular typescript formarray ng-zorro-antd

Answer 1

Answer №1

I was able to identify the root of the problem. It appears that even the nested forms need to be marked as dirty and updated. So, I made some modifications to the onSubmit function to address this issue. I appreciate the efforts of everyone who offered their assistance :)

submitForm(): void {
  // tslint:disable-next-line: forin
  for (const i in this.validateForm.controls) {
    this.validateForm.controls[i].markAsDirty();
    this.validateForm.controls[i].updateValueAndValidity();
    if (i === 'projectHeaders') {
      const control = this.validateForm.get('projectHeaders') as FormArray;
      // tslint:disable-next-line: forin
      for (const j in control.controls) {
        const controlTwo = control.controls[j] as FormGroup;
        // tslint:disable-next-line: forin
        for (const k in controlTwo.controls) {
          controlTwo.controls[k].markAsDirty();
          controlTwo.controls[k].updateValueAndValidity();
        }
      }
    }
    if (i === 'projectLines') {
      const control = this.validateForm.get('projectLines') as FormArray;
      // tslint:disable-next-line: forin
      for (const j in control.controls) {
        const controlTwo = control.controls[j] as FormGroup;
        // tslint:disable-next-line: forin
        for (const k in controlTwo.controls) {
          controlTwo.controls[k].markAsDirty();
          controlTwo.controls[k].updateValueAndValidity();
        }
      }
    }
  }
}

Answer 2

I was able to identify the root of the problem. It appears that even the nested forms need to be marked as dirty and updated. So, I made some modifications to the onSubmit function to address this issue. I appreciate the efforts of everyone who offered their assistance :)

submitForm(): void {
  // tslint:disable-next-line: forin
  for (const i in this.validateForm.controls) {
    this.validateForm.controls[i].markAsDirty();
    this.validateForm.controls[i].updateValueAndValidity();
    if (i === 'projectHeaders') {
      const control = this.validateForm.get('projectHeaders') as FormArray;
      // tslint:disable-next-line: forin
      for (const j in control.controls) {
        const controlTwo = control.controls[j] as FormGroup;
        // tslint:disable-next-line: forin
        for (const k in controlTwo.controls) {
          controlTwo.controls[k].markAsDirty();
          controlTwo.controls[k].updateValueAndValidity();
        }
      }
    }
    if (i === 'projectLines') {
      const control = this.validateForm.get('projectLines') as FormArray;
      // tslint:disable-next-line: forin
      for (const j in control.controls) {
        const controlTwo = control.controls[j] as FormGroup;
        // tslint:disable-next-line: forin
        for (const k in controlTwo.controls) {
          controlTwo.controls[k].markAsDirty();
          controlTwo.controls[k].updateValueAndValidity();
        }
      }
    }
  }
}

Answer 3

Answer №2

When utilizing Validators.required, the form status will be determined as either invalid or valid. If the required condition is not met, the field will be marked as invalid. The form will only be considered valid if the condition is satisfied. To indicate that a field is required, you can customize the validation message, change the border color to red, and disable the submit button.

In CSS::

input.form-control.ng-invalid {
    border: 2px solid red;
}

Your TypeScript file is correctly configured. Just remember to include a validation message or change the border color of the field if the required condition is not met.

Answer 4

When utilizing Validators.required, the form status will be determined as either invalid or valid. If the required condition is not met, the field will be marked as invalid. The form will only be considered valid if the condition is satisfied. To indicate that a field is required, you can customize the validation message, change the border color to red, and disable the submit button.

In CSS::

input.form-control.ng-invalid {
    border: 2px solid red;
}

Your TypeScript file is correctly configured. Just remember to include a validation message or change the border color of the field if the required condition is not met.

Why is my formArray in Angular not validating or updating correctly?

Answer №1

Answer №2

Similar questions

checkbox with an option tag

Angular 2 with a jssor slider that adjusts seamlessly to different screen

Utilizing the subclass type as a parameter in inheritance

Bringing PNGs and SVGs into React - Error TS2307: Module not found

How to successfully extract and understand JSON data in Angular that has been delivered from a Spring controller

Utilizing Prisma Enum with Nest JS: A Comprehensive Guide

There seems to be an issue with locating a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables like Arrays

The 'validate' property within the 'MappingService' class cannot be assigned to the 'validate' property in the base class 'IMappingService' in typescript version 2.8.0

Are React component properties enclosed in curly braces?

Attempting to render the application results in an error message stating: "Actions must be plain objects. Custom middleware should be used for asynchronous actions."

Is it possible to utilize CreateSpyObj to generate a spy for every method within a given class?

Encountering an error during the building of an AOT compilation due to a jointly used

strictNullChecks and the dissemination of null values

What is the best way to initialize a component only when its tag is set to *ngIf=true?

Display only the clear button within the p-calendar element

Enforcing strict property validation on variables passed into TypeScript functions

Did the IBM MobileFirst client miss the call to handleFailure?

Tips for organizing HTML logic in a separate document

Ways to eliminate the need for margin adjustments when buttons are shown in Responsive mode

Issue encountered: Compilation error occurred following the update from Angular 11 to Angular 15, stemming from the module build failure within the sass-loader directory