angular - 如何根据Angular中另一个字段的数字输入添加输入字段？

Question

所以，我有一个只允许输入数字的输入字段。我想要实现的是，当我在该输入字段上键入一个数字时，它将生成一组字段（姓名、地址、号码、电子邮件）。例如，我在输入字段中输入了 3，它应该会自动添加 3 组字段（姓名、地址、号码、电子邮件）。现在我正在使用添加按钮手动添加字段，并且用户已经可以看到一组字段。这是供您参考的代码：

对于数字输入字段：

<mat-form-field appearance="outline" class="width-3">
                <mat-label>Total number of person on board</mat-label>
                <input
                  maxlength="50"
                  matInput
                  formControlName="totalNumberPersonsOnBoard"
                  placeholder="number of persons on board"
                  (input)="inputTotal(total.value)"
                  #total
                  appNumbersSpecial
                  required
                />
                <mat-error>Error! only numbers are allowed</mat-error>
              </mat-form-field>

对于要生成的字段集：

<div formArrayName="passenger">
          <div
            *ngFor="let passengerGroup of passenger?.controls; let i = index"
            [formGroupName]="i"
          >
            <div class="container">
              
              <div class="row justify-content-start">
                <div class="col-md">
                  <mat-form-field appearance="outline" class="width-1">
                    <mat-label>Passenger's name</mat-label>
                    <input
                      maxlength="50"
                      matInput
                      formControlName="name"
                      placeholder="Passenger's name"
                      required
                    />
                  </mat-form-field>
                </div>
                <div class="col-md">
                  <mat-form-field appearance="outline" class="width-1">
                    <mat-label>Passenger's address</mat-label>
                    <input
                      maxlength="250"
                      matInput
                      formControlName="address"
                      placeholder="Passenger's address"
                      required
                    />
                  </mat-form-field>
                </div>
                <div class="col-md">
                  <mat-form-field appearance="outline" class="width-1">
                    <mat-label>Passenger's emergency phone</mat-label>
                    <input
                      maxlength="50"
                      matInput
                      formControlName="phone"
                      placeholder="Passenger's emergency phone"
                      #pass
                      required
                    />
                    <mat-error>Error! only numbers are allowed</mat-error>
                  </mat-form-field>
                </div>
                <div class="col-md">
                  <mat-form-field appearance="outline" class="width-1">
                    <mat-label>Passenger's email</mat-label>
                    <input
                      formControlName="email"
                      maxlength="50"
                      name="email"
                      id="email"
                      placeholder="[e-mail]"
                      autocomplete="off"
                      type="text"
                      matInput
                      #email
                      required
                    />
                    <mat-error>Error! email is incorrect</mat-error>
                  </mat-form-field>
                </div>
              </div>
            </div>
          </div>
        </div>

这是添加按钮的代码：

<div class="center">
          <button
            type="button"
            class="next-button"
            mat-flat-button
            matTooltip="Add new passenger"
            matTooltipClass="tooltipClass"
            matTooltipPosition="below"
            (click)="addPassenger()"
          >
            <mat-icon>add</mat-icon>
          </button>
        </div>

这是添加输入字段的 TS 代码：

 addPassenger(): void {
    this.passenger.push(
      new FormGroup({
        name: new FormControl(),
        address: new FormControl(),
        phone: new FormControl(),
        email: new FormControl('', [
          Validators.pattern(
            /[a-zA-Z0-9.-_]{1,}@[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}/
          ),
        ]),
      })
    );
  }

标签： angulartypescriptinputuser-inputauto-generate

Answer 1

你为什么不调用方法addPassenger()from inputTotal()？

您可以在 stackblitz 上查看：
https ://stackblitz.com/edit/angular-angular-material-themes-udknw9?file=src%2Fapp%2Fapp.component.ts

inputTotal(length) {
    if (length < 0) {
      return;
    }

    length = Math.min(length, 50);
    if (length > this.passengeres.length) {
      const size = length - this.passengeres.length;
      for (let i = 0; i < size; i++) {
        this.addPassenger();
      }
    } else if (length < this.passengeres.length) {
      const size = this.passengeres.length - length;
      for (let i = 0; i < size; i++) {
        this.removePassenger();
      }
    }
  }