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

Question

I am trying to use nested reactive forms in angular and gave validations on each field. I am checking the fields after I submit the form. If there are any errors the form shows them and keeps listening for changes. Now, the nested form login is throwing "Maximum stack call exceeded error". I understood that's because browser kept calling login() getter defined in TS file. Can anyone tell me how to fix this?

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

The line this.login.controls inside getter of login again tries to invoke the same getter because you try to access this.login which leads to recursion. And also this.login.controls wont give you the controls directly. You have to fetch it through vendorSignupForm as shown below.

Consider refactoring your login getter as follows.

get login() {
    let login = this.vendorSignupForm.get('login') as FormGroup;
    return login.controls;
}