Angular Reactive form rendering issue breaking the form

Question

So I am having a very weird problem with Angular reactive form. I asked my instructor, he couldn't figure it out so I have only one place I am wishing to get some help from. It's here. So I am using a Angular form and the signup.component.html code snippet is:

<form [formGroup]="form" (submit)="onSaveUser()" *ngIf="!isLoading">

  <mat-accordion class="accordion-headers-align">
    <mat-expansion-panel [expanded]="1">
      <mat-expansion-panel-header>
        <mat-panel-title>Personal data</mat-panel-title>
        <mat-panel-description>Type your personal details</mat-panel-description>
      </mat-expansion-panel-header>

      <mat-form-field>
        <input matInput type="text" formControlName="name" placeholder="Name">
        <mat-error *ngIf="form.get('name').invalid">Please enter your name</mat-error>
      </mat-form-field>

      <mat-form-field>
        <input matInput type="date" formControlName="dob" placeholder="DD/MM/YYYY">
        <mat-error *ngIf="form.get('dob').invalid">Please enter your valid date of birth in form of DD/MM/YYYY</mat-error>
      </mat-form-field>

and continue like that, ignore the accordion part pls. Then my signup.component.ts file is:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

  isLoading = false;
  form: FormGroup;
  imagePreview: string;

  constructor(public userService: UsersService, public route: ActivatedRoute) { }

  ngOnInit() {
    this.form = new FormGroup({
      name: new FormControl(null, {validators: [
        Validators.required,
        Validators.minLength(3),
        // tslint:disable-next-line:quotemark
        Validators.pattern(some regex not of concern)
      ]}),
      dob: new FormControl(null, {validators: [
        Validators.required,
        // tslint:disable-next-line:max-line-length quotemark
        Validators.pattern(some regex not of concern)
      ]}),

and continued like this, nothing special. Just trying to map the form fields. So the form renders like this: The error I am getting in console is:

ERROR TypeError: "this.form is undefined, can't access property "get" of it".

ERROR Error: "formGroup expects a FormGroup instance. Please pass one in.

ERROR TypeError: "_co.form is undefined, can't access property "get" of it".

and I don't understand what is going wrong, I checked the documentation and everything, no help. I am guessing it's a possible bug so wanted to make sure.

@SiddharthAjmera I have made that project locally, I can't upload the whole project. — MiKr13
– MiKr13, Commented Sep 1, 2018 at 13:49
@SiddharthAjmera stackblitz.com/edit/angular-mtapsn here you go — MiKr13
– MiKr13, Commented Sep 1, 2018 at 13:58
Hi @MihirKumar Your stackblitz does not work, It is a not a platform just to show your code. Please provide verifiable example reproducing your issue. — Amit Chigadani
– Amit Chigadani, Commented Sep 1, 2018 at 14:00
@AmitChigadani for that I'll have to recreate a whole project of several components. — MiKr13
– MiKr13, Commented Sep 1, 2018 at 14:06

mp92 · Accepted Answer · 2018-09-01 14:00:59Z

1

I resolve with *ngIf="form", in this way form tag will be rendered only when form is ready.

<form [formGroup]="form" (submit)="onSaveUser()" *ngIf="form">

answered Sep 1, 2018 at 14:00

mp92

925 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MiKr13 Over a year ago

But this should also work as I am using mat-spinner to load it while the form isn't loaded.

mp92 Over a year ago

Fix me if I'm wrong, you want to see "mat-spinner" till form is ready, right? And "isLoading" should hide "mat-spinner" and show "form" ? If ok, *ngIf="form && !isLoading"

MiKr13 Over a year ago

Yeah, that's possible but see the error, it's in the get part and some other stuff. My spinner is loading fine, but my form is rendering weird.

mp92 Over a year ago

Try with "?" to avoid check null properties *ngIf="form?.get('name').invalid"

Collectives™ on Stack Overflow

Angular Reactive form rendering issue breaking the form

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related