Custom input Angular / Reactive Forms

Question

I'm using a stepper from the angular material and I'm unsure how best to make a component for each step of this stepper.

Because I have a lot of difficulty in shared forms. I wanted to know the best way to do this.

In the main component of the stepper, get the values of each step and at the end make a post with the 3 forms of the step. As you can see, the code is already getting too big, so the ideal would be to make a component for each step

Componente TS
  
  companyInfo!: FormGroup;
  contactInfo!: FormGroup;
  selectedType: boolean = false;
  
  constructor(public fb: FormBuilder) { }

  ngOnInit(): void {
    this.initCompanyInfo();
    this.initContactInfo();
    console.log(this.companyInfo.get('industry')?.value)
  }
  initCompanyInfo(){
    this.companyInfo = this.fb.group({
      companyName: ['', Validators.required],
      industry: ['', Validators.required],
      country: ['', Validators.required],
    })
  }
  initContactInfo() {
    this.contactInfo = this.fb.group({
      contact: this.fb.array([this.createContact])
    })
  }
  createContact(): FormGroup {
    return this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      position: ['', Validators.required],
      email: ['', Validators.required],
      confirmEmail: ['', Validators.required],
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required],
      phoneNumber: ['', Validators.required],
    })
  }

<mat-horizontal-stepper [labelPosition]="'bottom'" linear>
  <mat-progress-bar [value]=progressValue></mat-progress-bar>

  <!-- STEP 1 -->

  <mat-step label="COMPANY INFORMATION">
    <mat-card>
      <div class="card-header">
        <p>Company Info</p>
        <button mat-raised-button matStepperNext (click)="additionProgress()">Next</button>
      </div>
      <mat-card-content>
        <form [formGroup]="companyInfo">
            <div class="main-right">
              <div class="header-section">
                <span>STATE</span>
              </div>
              <div class="form">
                <mat-form-field class="width6" appearance="outline">
                  <mat-label>COUNTRY</mat-label>
                  <input matInput formControlName="country">
                  <mat-error></mat-error>
                </mat-form-field>

                <mat-form-field appearance="outline">
                  <mat-label>STATE</mat-label>
                  <input matInput formControlName="state">
                  <mat-error></mat-error>
                </mat-form-field>

                <mat-form-field appearance="outline">
                  <mat-label>CITY</mat-label>
                  <input matInput formControlName="city">
                  <mat-error></mat-error>
                </mat-form-field>

                <mat-form-field class="width6" appearance="outline">
                  <mat-label>ADDRESS</mat-label>
                  <input matInput formControlName="address">
                  <mat-error></mat-error>
                </mat-form-field>

                <mat-form-field class="width8" appearance="outline">
                  <mat-label>ZIPCODE</mat-label>
                  <input matInput type="number" formControlName="zipcode">
                  <mat-error></mat-error>
                </mat-form-field>
              </div>
            </div>
          </div>
          <div class="main-form">
            <div class="main-left">
              <div class="header-section">
                <span>COMPANY</span>
              </div>

              </div>
            </div>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </mat-step>
  
  
  <!-- STEP 2 -->
  <mat-step label="CONTACT INFORMATION">
    <p>Opa2</p>
    <button mat-raised-button matStepperPrevious (click)="subtractionProgress()">Previous</button>
    <button mat-raised-button matStepperNext (click)="additionProgress()">Next</button>
  </mat-step>


  <!-- STEP 3 -->
  <mat-step label="GENERAL INFORMATION">
    <p>Opa3</p>
    <button mat-raised-button matStepperPrevious (click)="subtractionProgress()">Previous</button>
  </mat-step>
</mat-horizontal-stepper>

Just each component has an @Input() that was the "form"

Eliseo
– Eliseo

2021-08-17 06:13:18 +00:00
Commented Aug 17, 2021 at 6:13 — Eliseo
– Eliseo, Commented Aug 17, 2021 at 6:13

HoseinGhanbari · Accepted Answer · 2021-08-17 05:44:16Z

1

you can use a SERVICE and BehaviorSubject to share the FormGroup objects among multiple components... check the following demo on stackblitz...

https://stackblitz.com/edit/angular-ivy-cd6bup

answered Aug 17, 2021 at 5:44

HoseinGhanbari

1,1612 gold badges13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eliseo Over a year ago

you can simply create the formGroup in main.component and pass as input to the components. See your forked stackblitz

HoseinGhanbari Over a year ago

of course there are many solutions out there when talking JavaScript !

Rod Over a year ago

Man, I love your idea, but when I try to implement it, it's in formGroup Type 'FormGroup | null' is not assignable to type 'FormGroup'. Type 'null' is not assignable to type 'FormGroup'.

Collectives™ on Stack Overflow

Custom input Angular / Reactive Forms

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related