TypeError: Cannot read property 'get' of null - FormControlName

Question

This is my error

core.js:6479 ERROR TypeError: Cannot read property 'get' of null
at FormGroupDirective.addControl (forms.js:5346)
at FormControlName._setUpControl (forms.js:5929)
at FormControlName.ngOnChanges (forms.js:5874)
at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1498)
at callHook (core.js:2536)
at callHooks (core.js:2495)
at executeInitAndCheckHooks (core.js:2446)
at selectIndexInternal (core.js:8447)
at Module.ɵɵadvance (core.js:8430)
at SignInComponent_Template (sign-in.component.html:36)

I don't know why and where am I going wrong.

This is my HTML file

<form (formGroup)="signInForm">
              <mat-form-field class="full-width">
                <mat-label>Email</mat-label>
                <input  matInput  placeholder="Email" name="email" formControlName="email" [(ngModel)]="email">
             </mat-form-field>
             <mat-form-field class="full-width">
                <mat-label>Password</mat-label>
                <input  matInput  placeholder="Password" name="password" formControlName="pass" [(ngModel)]="pass">
             </mat-form-field>
              <button
                (click)="signIn()"
                mat-raised-button
                color="primary"
                class="login-button">
                Sign In
              </button>
            </form>

<form [formGroup]="signUpForm">
            <mat-form-field class="full-width">
              <mat-label>Username</mat-label>
              <input  matInput  placeholder="Full name"  name="name" formControlName="name" [(ngModel)]="name">
           </mat-form-field>
           <mat-form-field class="full-width">
              <mat-label>E-mail</mat-label>
              <input  matInput  placeholder="Email" name="email"  formControlName="email" [(ngModel)]="email">
           </mat-form-field>
           <mat-form-field class="full-width">
              <mat-label>Contact</mat-label>
              <input  matInput  placeholder="Contact" name="contact"  formControlName="contact" [(ngModel)]="contact">
           </mat-form-field>
           <mat-form-field class="full-width">
              <mat-label>Address</mat-label>
              <input  matInput  placeholder="Address" name="address" formControlName="address" [(ngModel)]="address">
           </mat-form-field>
           <mat-form-field class="full-width">
              <mat-label>Password</mat-label>
              <input  matInput  placeholder="Password"  name="pass" formControlName="pass" [(ngModel)]="pass">
           </mat-form-field>
           <mat-form-field class="full-width">
            <mat-label>Confirm Password</mat-label>
            <input  matInput  placeholder="Confirm Password"  name="conpass" formControlName="conpass" [(ngModel)]="conpass">
            </mat-form-field>
            <!-- <label class="example-margin">Type of User:</label>
            <mat-radio-group>
              <mat-radio-button class="example-margin" value="after">Buyer</mat-radio-button>
              <mat-radio-button class="example-margin" value="before">Seller</mat-radio-button>
            </mat-radio-group> -->
            <mat-form-field appearance="fill">
              <mat-label>Choose one</mat-label>
              <mat-select [formControl]="selected" [errorStateMatcher]="matcher" name="option" id="option">
                <mat-option value="none">please select</mat-option>
                <mat-option value="valid">Buyer</mat-option>
                <mat-option value="invalid">Seller</mat-option>
              </mat-select>
              </mat-form-field>
            <button (click)="signUp()"
              mat-raised-button
              color="primary"
              class="login-button">
              Sign Up
            </button>
          </form>

And this is my TS file

import { NumberInput } from '@angular/cdk/coercion';
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators, FormGroupDirective, NgForm, FormGroup, FormBuilder } from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}
@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {
  email:String="";
  name:String="";
  contact:NumberInput="";
  address:String="";
  pass:String="";
  conpass:String="";
  constructor( private fb : FormBuilder) { }

  signUpForm=this.fb.group ({
    name : new FormControl(Validators.required),
    email : [null,[Validators.email , Validators.required]],
    contact :[null,[Validators.required]],
    address : [null,[Validators.required]],
    pass : [null,[Validators.required]],
    conpass : [null,[Validators.required]]

  });

  signInForm=this.fb.group({
    email : [null,[Validators.email , Validators.required]],
    pass : [null,[Validators.required]]
  });

  selected = new FormControl('valid', [
    Validators.required,
    Validators.pattern('valid'),
  ]);

  selectFormControl = new FormControl('valid', [
    Validators.required,
    Validators.pattern('valid'),
  ]);

  nativeSelectFormControl = new FormControl('valid', [
    Validators.required,
    Validators.pattern('valid'),
  ]);

  matcher = new MyErrorStateMatcher();
  // favoriteSeason: string;
  // seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
  // onLogin(form : NgForm)
  // {
  //   console.log(form.value)
  // }
  // onSingup(form : NgForm)
  // {
  //   console.log(form.value)
  // }

  ngOnInit(): void {
  }

  signUp(){
    if(this.signUpForm.valid || (this.signUpForm.controls.pass.value != this.signUpForm.controls.conpass.value))
    {
      console.log("Invalid Form!")
      return;
    }
    console.log(JSON.stringify(this.signUpForm.value))
  }

  signIn(){
    if(this.signUpForm.valid)
    {
      console.log("Invalid Form!")
      return;
    }
    console.log(JSON.stringify(this.signUpForm.value))
  }

}

I thought that not mentioning ngModel would be an issue first but even after adding that the same error again and again, when I run the code it my GUI is totally destroyed and disrupted showing the above error. Please help me with this, stuck since forever here.

Answer 1

Your signInForm form group directive should be in a square bracket.

(formGroup)="signInForm"

It should be like,

[formGroup]="signInForm"