formGroup is derecated in angular?

Question

The following is my .ts file of the reactive forms

 import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup, Validator, Validators } from '@angular/forms';
    import { PasswordCheck } from './custom-validators/password-checker';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })


    export class AppComponent implements OnInit {
      title = 'signup-reactive';
      registerForm: FormGroup;
      submitted: boolean = false;

      constructor(private formBuilder: FormBuilder) { } 
       ngOnInit() {

    this.registerForm = this.formBuilder.group({
      firstName: [''/* by default value of the field*/,Validators.required,Validators.minLength(3)],
      lastName: ['',Validators.required,Validators.minLength(2)],
      email: ['',Validators.email,Validators.required],
      password: ['',Validators.required],
      confirmPassword: ['',Validators.required],
      acceptTandC : [false,Validators.requiredTrue]
    },{
      validators:PasswordCheck('password','confirmPassword')
    });
    
    
    }

    onSubmit(){
     this.submitted = true;
       if(this.registerForm.invalid)
       {
         return;
       }
       else
       {
          console.table(this.registerForm.value);
          console.table(this.registerForm.value);

          alert("success" + JSON.stringify(this.registerForm.value));

       }
    }

  
    get h(){
        return this.registerForm.controls; 
    }
    onReset(){
     this.submitted = false;
      this.registerForm.reset();
    }


    }

and the following is the code of my .HTML file

     <div class="container">
     <div class="card bg-dark text-white m-3 mt-5">
       <h5 class="card-header text-center">
         <img src="../assets/lco.png" alt="" width="30" height="30" class="mr-2" />
         LCO Signup Form
       </h5>
       <div class="card-body">
         <form [formGroup]="registerForm">
           <div class="form-row">
             <div class="form-group col-6">
               <label>First Name</label>
               <input type="text" class="form-control"
                formControlName = "firstName"
                [ngClass] = "{ 'is-invalid' : submitted && h.firstName.errors}"
               />
               <div class="text-warning">
                 <div>
                   First Name is required
                 </div>
               </div>
             </div>
             <div class="form-group col-6">
               <label>Last Name</label>
               <input type="text" class="form-control" formControlName = "lastName"
               [ngClass] = "{ 'is-invalid' : submitted && h.lastName.errors}"
               />
               <div class="text-warning">
                 <div>
                   Last Name is required
                 </div>
               </div>
             </div>
           </div>
           <div class="form-group">
             <label>Email</label>
             <input type="text" class="form-control"
             formControlName = "email"
             [ngClass] = "{ 'is-invalid' : submitted && h.email.errors}"
             />
             <div class="text-warning">
               <div>Email is required</div>
               <div>
                 Email must be a valid email address
               </div>
             </div>
           </div>
   
           <ng-container>
             <div class="text-danger">
               Value is required.
             </div>
           </ng-container>
           <div class="form-row">
             <div class="form-group col">
               <label>Password</label>
               <input type="password" class="form-control" 
               formControlName = "password"
               [ngClass] = "{ 'is-invalid' : submitted && h.password.errors}"
               />
               <div class="text-warning">
                 <div>Password is required</div>
                 <div>
                   Password must be at least 6 characters
                 </div>
               </div>
             </div>
             <div class="form-group col">
               <label>Confirm Password</label>
               <input type="password" class="form-control" 
               formControlName = "confirmPassword"
               [ngClass] = "{ 'is-invalid' : submitted && h.confirmPassword.errors}"
               />
               <div class="text-warning">
                 <div>
                   Confirm Password is required
                 </div>
                 <div>
                   Passwords must match
                 </div>
               </div>
             </div>
           </div>
           <div class="form-group form-check">
             <input type="checkbox" id="acceptTerms" class="form-check-input"
             formControlName = "acceptTandC"
             [ngClass] = "{ 'is-invalid' : submitted && h.acceptTandC.errors}"
             />
             <label for="acceptTerms" class="form-check-label">Accept Terms & Conditions</label>
             <div class="text-warning">
               Accept Ts & Cs is required
             </div>
           </div>
           <div class="text-center">
             <button class="btn btn-success btn-lg px-4 mr-3" (ngSubmit)="onSubmit()">Register</button>
             <button class="btn btn-warning" type="reset" (click)="onReset()">
               Reset
             </button>
             <p class="text white">Value: {{ registerForm.value | json }}</p>
             <p class="text white">Value: {{ registerForm.valid | json }}</p>
           </div>
         </form>
       </div>
     </div>
   </div>

But this code is giving me errors in console and also the p tags at the last are not working

Errors that are in console are

core.js:5980 ERROR Error: Expected validator to return Promise or Observable.

 <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });
    at Function.missingFormException (forms.js:1777)
    at FormGroupDirective._checkFormPresent (forms.js:5768)
    at FormGroupDirective.ngOnChanges (forms.js:5587)
    at FormGroupDirective.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1471)
    at callHook (core.js:2490)
    at callHooks (core.js:2457)
    at executeInitAndCheckHooks (core.js:2408)
    at selectIndexInternal (core.js:8194)
    at Module.ɵɵadvance (core.js:8177)
    at AppComponent_Template (app.component.html:14)

kindly help me with the issue I have read documentation but couldn't reach to a conclusion

and the issue is is-invalid class is not adding here

Answer 1

Angular throws error because third object in array must be async validator and you provide basic validator.

Replace

 firstName: ['',Validators.required,Validators.minLength(3)],
 lastName:  ['',Validators.required,Validators.minLength(2)],
 email:     ['',Validators.email,Validators.required],
 ...

with

 firstName: ['',[Validators.required,Validators.minLength(3)]],
 lastName:  ['',[Validators.required,Validators.minLength(2)]],
 email:     ['',[Validators.email,Validators.required]],
 ...