Only implement valueChanges on the second step of the form

Question

Only implement valueChanges on the second step of the form

I am utilizing the mat-stepper with a single form. My stepper has two steps only. I am looking to make an API request for every input value change, but only when the user is on the second step. How can I accomplish this?

.ts

  ngOnInit() {
    this.formGroup = this._formBuilder.group({
      formArray: this._formBuilder.array([
        this._formBuilder.group({
          "product": ['lifeci', Validators.required],
          "gender": ['', Validators.required],
          "birthDate": ['', [Validators.min(18), Validators.max(50)]],
          "payFrequency": [12],
          "subLimit": ['100']
        }),
        this._formBuilder.group({
          "currency": ['USD', Validators.required],
          "amount": ['15000', Validators.required],
          "period": ['', Validators.required],
        }),
      ])
    });
    //send request onchange
    this.formGroup.valueChanges.subscribe(val => {
      this.onSubmit();
    });
  }

In terms of HTML, I am following the same structure as outlined in the documentation.

angular typescript

Answer 1

Answer №1

Subscribe solely to the second segment of the form's progression

(this.formGroup.get('formArray') as FormArray).at(1).valueChanges.subscribe(val => {
      this.onSubmit();
    });
  }

Answer 2

Subscribe solely to the second segment of the form's progression

(this.formGroup.get('formArray') as FormArray).at(1).valueChanges.subscribe(val => {
      this.onSubmit();
    });
  }

Answer 3

Answer №2

To start, introduce a new variable currentTab in your TypeScript file.

const currentTab = 0;

Next, include the currentTab input directive in your stepper component:

<mat-horizontal-stepper [currentTab]="selectedTabIndex">

Lastly, update the subscription method for valueChanges as follows:

this.formGroup.valueChanges.subscribe(value => {
    if (currentTab === 1) {// Indicates that the second tab is selected
        this.onSubmit();
    }
});

Answer 4

To start, introduce a new variable currentTab in your TypeScript file.

const currentTab = 0;

Next, include the currentTab input directive in your stepper component:

<mat-horizontal-stepper [currentTab]="selectedTabIndex">

Lastly, update the subscription method for valueChanges as follows:

this.formGroup.valueChanges.subscribe(value => {
    if (currentTab === 1) {// Indicates that the second tab is selected
        this.onSubmit();
    }
});

Answer 5

Answer №3

In order to effectively operate within a specific form, it is recommended to separate each step into its own "semi-form" using getters.

Start by defining an enum or type in your component file that outlines each step of the form.

enum FormStep {
  BorrowerDetails = 0,
  LoanDetails = 1
}

In your component class, create getters for each step.

private get borrowerDetailsForm() {
  return (this.formGroup.get('formArray') as FormArray).at(FormStep.BorrowerDetails);
}

private get loanDetailsForm() {
  return (this.formGroup.get('formArray') as FormArray).at(FormStep.LoanDetails);
}

With these getters established, you can easily access and manipulate each step of the form within your component.

this.loanDetailsForm.valueChanges.subscribe(() => this.onSubmit());

Answer 6

In order to effectively operate within a specific form, it is recommended to separate each step into its own "semi-form" using getters.

Start by defining an enum or type in your component file that outlines each step of the form.

enum FormStep {
  BorrowerDetails = 0,
  LoanDetails = 1
}

In your component class, create getters for each step.

private get borrowerDetailsForm() {
  return (this.formGroup.get('formArray') as FormArray).at(FormStep.BorrowerDetails);
}

private get loanDetailsForm() {
  return (this.formGroup.get('formArray') as FormArray).at(FormStep.LoanDetails);
}

With these getters established, you can easily access and manipulate each step of the form within your component.

this.loanDetailsForm.valueChanges.subscribe(() => this.onSubmit());

Only implement valueChanges on the second step of the form

Answer №1

Answer №2

Answer №3

Similar questions

Injecting Services Error in Angular

Issue with Next.js: Router.push not causing page to refresh

Is it possible for Angular2 to map a lone JSON object?

Transform Typescript code into Javascript using webpack while preserving the folder organization

Unit testing Firebase function with Jest for mocking

Creating dynamic Kafka topic names within a NestJS microservice

The module 'AppModule' has imported an unexpected pipe. To resolve this issue, please include a @NgModule annotation

How to display specific JSON objects that meet particular criteria in HTML cards using Ionic and Angular?

Transform angularjs directive into angular 10

Errors in typing occurring due to preact children within framer-motion

Is OnPush Change Detection failing to detect state changes?

Neither Output nor EventEmitter are transmitting data

Using ThreeJS to Apply Dual Materials to a Mesh Entity

There was an unhandled exception that occurred due to a missing file or directory with the lstat error on 'D:a1s ode_modulesquill'

Ensuring a Generic Type in Typescript is a Subset of JSON: Best Practices

Error Encountered: Anticipated 'styles' to consist of a series of string elements

Encountering an uncaught SyntaxError due to an unexpected token < while working with AngularJS2 on a local

Issue with tooltip not displaying attribute data-bs-title in Angular 17 with Bootstrap version 5.3

What is the best way to loop through the keys of a generic object in TypeScript?

Tips for utilizing multiple components in Angular 2