TS2304: Cannot find name 'FormGroup'

Question

It says Cannot find name 'FormGroup' in TS file : I have done everything correctly can someone help me on this code, i have donnw what's wrong with this code . TS code

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-register-form',
  templateUrl: './register-form.component.html',
  styleUrls: ['./register-form.component.css']
})
export class RegisterFormComponent implements OnInit {
     userForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
      this.userForm = this.formBuilder.group({
      firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
      lastName: ['',[Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
      email: ['', [Validators.required, Validators.email]]
    });
    
  }
     onSubmit(){
    if(this.userForm.valid){
      alert('User form is valid!!')
    } else {
      alert('User form is not valid!!')
    }
  }
}

My html code :

<form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="text-center border border-light p-5">

<p class="h4 mb-4">Sign up</p>
<div class="form-group col">
    <div class="form-row">
        <div class="form-row mb-4">
          
                  <div class="col">
                      <input type="text" formControlName="firstName" id="defaultRegisterFormFirstName" class="form-control" placeholder="First name">
                  </div>
                  <div class="col">
                      <input type="text" formControlName="lastName" id="defaultRegisterFormLastName" class="form-control" placeholder="Last name">
                  </div>
        </div>
    </div>
</div>
  <input type="email" formControlName="email" id="defaultRegisterFormEmail" class="form-control mb-4" placeholder="E-mail">

  <button class="btn btn-info my-4 btn-block" type="submit">Sign in</button>

  <hr>

</form>

found this problem in many questions in stackoverflow but no luck. Please help me for figuring out what I am doing wrong

score 1 · Answer 1 · answered Dec 17 '21 at 12:45

You should init formbuilder after view loaded.

    import {FormControl, FormGroup} from '@angular/forms';

 ngAfterViewInit(){
       this.userForm = this.formBuilder.group({
          firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
          lastName: ['',[Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
          email: ['', [Validators.required, Validators.email]]
        });
    }

score 0 · Answer 2 · answered Dec 17 '21 at 12:12

0

I don't know if this is all your code but maybe you are missig this import because I don't see it ?

import {FormControl, FormGroup} from '@angular/forms';

answered Dec 17 '21 at 12:12

Ezekiela Rakotoarijaona

100
2
9

Yep, it seems FormGroup import is missing here – Rajantha Fernando Dec 17 '21 at 12:27
now i have import it and i get a new error : TS2564: Property 'userForm' has no initializer and is not definitely assigned in the constructor. – sai Dec 17 '21 at 12:41
Is your tsconfig.json contain following property as true? "strictPropertyInitialization" – Rajantha Fernando Dec 17 '21 at 12:53
Checkout this thread https://stackoverflow.com/questions/49699067/property-has-no-initializer-and-is-not-definitely-assigned-in-the-construc – Rajantha Fernando Dec 17 '21 at 12:56

TS2304: Cannot find name 'FormGroup'

2 Answers2