title: ERROR RangeError: Maximum call stack size exceeded (Angular 6)
body: <p>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?</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>component.html:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;form [formGroup]="vendorSignupForm" (ngSubmit)="onSubmit()"&gt;
  
      &lt;div class="form-group"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
            &lt;label for="name"&gt;Restaurant Name&lt;/label&gt;
            &lt;input type="text" formControlName="name" class="form-control" pattern="[a-zA-z\\s]+" [ngClass]="{'is-invalid': submitted &amp;&amp; f.name.errors}" /&gt;
            &lt;div *ngIf="submitted &amp;&amp; f.name.errors" class="invalid-feedback"&gt;
              &lt;div *ngIf="f.name.errors.required"&gt;Name is required&lt;/div&gt;
              &lt;div *ngIf="f.name.errors.pattern"&gt;Not a valid name!&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
            &lt;label for="emailId"&gt;Email&lt;/label&gt;
            &lt;input type="email" formControlName="emailId" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.emailId.errors }" /&gt;
            &lt;div *ngIf="submitted &amp;&amp; f.emailId.errors" class="invalid-feedback"&gt;
              &lt;div *ngIf="f.emailId.errors.required"&gt;Email is required&lt;/div&gt;
              &lt;div *ngIf="f.emailId.errors.email"&gt;Not a valid email!&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div formGroupName="login"&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;label for="password"&gt;Password&lt;/label&gt;
              &lt;input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted &amp;&amp; login.password.errors }" /&gt;
              &lt;div *ngIf="submitted &amp;&amp; login.password.errors" class="invalid-feedback"&gt;
                &lt;div *ngIf="login.password.errors.required"&gt;Password is required&lt;/div&gt;
                &lt;div *ngIf="login.password.errors.minlength"&gt;Password must be at least 8 characters&lt;/div&gt;
                &lt;div *ngIf="login.password.errors.maxlength"&gt;Password cannot be more than 15 characters&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        ...
      &lt;/div&gt;
  </code></pre>
  
  <p>component.ts:</p>
  
  <pre><code>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;
      }
    }
  }
  </code></pre>