验证并从角度材料中添加更多功能获取数据

Question

我第一次使用表单数组，如果它很简单并且我不理解，请忍受。 我以这种形式尝试了很多事情，以便我可以添加更多内容，但是同时在所有字段上都给出了验证错误。我知道会有索引的使用，但无法弄清楚如何使用它，在成功验证之后，我必须从那些字段中打印数据以检查数组是否正确创建。

<form [formGroup]="form">
          <div class="form-row">
            <div class="form-group my-sm-3 col">
              <mat-form-field>
                <input matInput placeholder="No. of Periods" type="text" [formControl]="periodT"
                       [errorStateMatcher]="matcher" autocomplete="off" maxlength="2">
                <mat-error *ngIf="periodT.hasError('required')">
                  This field is <strong>required</strong>
                </mat-error>
                <mat-error *ngIf="periodT.hasError('maxlength') && !periodT.hasError('required')">
                  This field is <strong>maximum 3 character long</strong>
                </mat-error>
                <mat-error *ngIf="periodT.hasError('pattern') && !periodT.hasError('required')">
                  This field is <strong>should be numeric</strong>
                </mat-error>
                <mat-error *ngIf="periodT?.errors?.invalid">
                  {{periodT?.errors?.invalid}}
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div formArrayName="breakList">
            <div *ngFor="let breakL of breakForms.controls; let i=index" [formGroupName]="i" class="form-row">
              <div class="row">
                <div class="col-md-5">
                  <mat-form-field>
                    <input matInput placeholder="Break Timing" type="text" [formControl]="BreakT" autocomplete="off"
                           maxlength="2">
                    <mat-error *ngIf="breakL.get('BreakT').hasError('required')">
                      This field is <strong>required</strong>
                    </mat-error>
                  </mat-form-field>
                </div>
                <div class="col-md-5">
                  <mat-form-field>
                    <input matInput placeholder="Break after Period" type="text" [formControl]="breakAP"
                           [errorStateMatcher]="matcher" autocomplete="off" maxlength="3">
                    <mat-error *ngIf="breakL.get('breakAP').hasError('required')">
                      This field is <strong>required</strong>
                    </mat-error>
                  </mat-form-field>
                </div>
                <div class="col-md-2">
                  <button mat-raised-button (click)="deletebreak(i)" type="button" color="warn">Delete</button>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <button mat-raised-button type="button" (click)="addbreak()"><i class="fa fa-plus"></i> Add rows</button>
            </div>
            <div class="col-md-6 text-right">
              <button mat-raised-button (click)="submitForm()">Save form</button>
            </div>
          </div>
        </form>

这是Ts文件

form: FormGroup;
  submitted = false;

  constructor(private formBuilder: FormBuilder) {
  }

  periodT = new FormControl('', [Validators.required,
    Validators.maxLength(3), Validators.pattern('[0-9]*$')]);
  BreakT = new FormControl('', [Validators.required,
    Validators.maxLength(3), Validators.pattern('[0-9]*$')]);
  breakAP = new FormControl('', [Validators.required,
    Validators.maxLength(3), Validators.pattern('[0-9]*$')]);
  ngOnInit() {
    this.form = this.formBuilder.group({
      periodT: this.periodT,
      breakList: this.formBuilder.array([
        this.initbreak()
      ])
    });
  }

  get breakForms() {
    return this.form.get('breakList') as FormArray;
  }

  initbreak() {
    return this.formBuilder.group({
      BreakT: this.BreakT,
      breakAP: this.breakAP,
    });
  }

  addbreak() {
    const control = <FormArray>this.form.controls['breakList'];
    const breakL = this.formBuilder.group({
      BreakT: this.BreakT,
      breakAP: this.breakAP
    });

    control.push(breakL);
  }

  deletebreak(i) {
    this.breakForms.removeAt(i);
  }

  async submitForm() {
    this.submitted = true;
    if (this.form.invalid) {
      return;
    }
  }