Question

我正在尝试使用有角的嵌套反应形式，并在每个字段上进行验证。提交表格后，我正在检查字段。如果有任何错误，则表单将显示它们并继续监听更改。现在，嵌套表单登录抛出“最大堆栈调用超出错误”。我知道这是因为浏览器一直在调用TS文件中定义的login（）getter。谁能告诉我如何解决这个问题？

Error in console:
ERROR RangeError: Maximum call stack size exceeded
    at VendorSignupComponent.get [as login] (vendor-signup.component.ts:53)
    at VendorSignupComponent.get [as login] (vendor-signup.component.ts:54)
    at VendorSignupComponent.get [as login] (vendor-signup.component.ts:54)
    at VendorSignupComponent.get [as login] (vendor-signup.component.ts:54)
    at VendorSignupComponent.get [as login] (vendor-signup.component.ts:54)
    at VendorSignupComponent.get [as login] (vendor-signup.component.ts:54)
    at VendorSignupComponent.get [as login] (vendor-signup.component.ts:54)

component.html：

<div class="container">
  <form [formGroup]="vendorSignupForm" (ngSubmit)="onSubmit()">

    <div class="form-group">
      <div class="row">
        <div class="col-sm-6 col-md-4">
          <label for="name">Restaurant Name</label>
          <input type="text" formControlName="name" class="form-control" pattern="[a-zA-z\\s]+" [ngClass]="{'is-invalid': submitted && f.name.errors}" />
          <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
            <div *ngIf="f.name.errors.required">Name is required</div>
            <div *ngIf="f.name.errors.pattern">Not a valid name!</div>
          </div>
        </div>
      </div>
    </div>

    <div class="form-group">
      <div class="row">
        <div class="col-sm-6 col-md-4">
          <label for="emailId">Email</label>
          <input type="email" formControlName="emailId" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.emailId.errors }" />
          <div *ngIf="submitted && f.emailId.errors" class="invalid-feedback">
            <div *ngIf="f.emailId.errors.required">Email is required</div>
            <div *ngIf="f.emailId.errors.email">Not a valid email!</div>
          </div>
        </div>
      </div>
    </div>

    <div formGroupName="login">
      <div class="form-group">
        <div class="row">
          <div class="col-sm-6 col-md-4">
            <label for="password">Password</label>
            <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && login.password.errors }" />
            <div *ngIf="submitted && login.password.errors" class="invalid-feedback">
              <div *ngIf="login.password.errors.required">Password is required</div>
              <div *ngIf="login.password.errors.minlength">Password must be at least 8 characters</div>
              <div *ngIf="login.password.errors.maxlength">Password cannot be more than 15 characters</div>
            </div>
          </div>
        </div>
      </div>
      ...
    </div>

component.ts：

export class VendorSignupComponent implements OnInit {

  submitted = false;
  vendorSignupForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private router: Router
  ) {}

  ngOnInit() {
    this.vendorSignupForm = this.formBuilder.group({
      name: ['', Validators.required],
      emailId: ['', [Validators.required, Validators.email]],
      openingTime: ['', Validators.required],
      closingTime: ['', Validators.required],
      minDeliveryTime: ['', Validators.required],
      minOrder: ['', Validators.required],
      mainCuisineType: ['', Validators.required],
      imageUrl: ['', Validators.required],
      numOfTables: ['', Validators.required],
      category: ['', Validators.required],
      vendorRegistrationId: ['', Validators.required],
      vendorAddress: this.formBuilder.group({
        street: ['', Validators.required],
        city: ['', Validators.required],
        pincode: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(6)]],
        state: ['', Validators.required],
        phoneNumber: ['', [Validators.required, Validators.maxLength(10), Validators.minLength(10)]],
        landlineNumber: [''],
      }),
      login: this.formBuilder.group({
        password: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(15)]],
        role: ['vendor']
      })
    });
  }

  get f() {
    return this.vendorSignupForm.controls;
  }

  get login() {
    return this.login.controls;
  }

  get vendorAddress() {
    return this.vendorAddress.controls;
  }

  onSubmit() {
    this.submitted = true;
    console.log(this.vendorSignupForm.value);

    if (this.vendorSignupForm.invalid) {
      return;
    }
  }
}

Answer 1

System.out.println(x + " " + y);的getter内的行this.login.controls再次尝试调用相同的login，因为您尝试访问getter导致递归。而且this.login也不会直接为您提供控件。您必须通过this.login.controls来获取它，如下所示。

请考虑如下重构您的vendorSignupForm获取器。

login

错误RangeError：超出了最大调用堆栈大小（角度6）

1 个答案: