自定义输入角度/反应形式

Question

我正在使用有棱角材料的步进器，但我不确定如何最好地为该步进器的每个步骤制作组件。

因为我在共享表单上有很多困难。我想知道最好的方法。

在 stepper 的主要组件中，获取每个 step 的值，最后用 step 的 3 种形式发布一个帖子。 如您所见，代码已经变得太大了，因此理想的做法是为每个步骤制作一个组件

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>

Answer 1

您可以使用 SERVICE 和 BehaviorSubject 在多个组件之间共享 FormGroup 对象...查看 stackblitz 上的以下演示...

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