How to set FormGroup and FormControl at the ngOnInit() with Angular?

Question

I have just started to learn Angular and old version should work:

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

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

  form: FormGroup

  constructor() {
  }

  ngOnInit() {
    this.form = new FormGroup(controls:{
      email: new FormControl(formState: null, validatorOrOpts: [Validators.required, Validators.email]),
      password: new FormControl(formState: null, validatorOrOpts: [Validators.required, Validators.minLength(minLength: 6)])
    })
  }

  onSubmit() {

  }

}

The errors:

Failed to compile.

src/app/login-page/login-page.component.ts:17:39 - error TS1005: ',' expected. this.form = new FormGroup(controls:{  

src/app/login-page/login-page.component.ts:18:39 - error TS1005: ',' expected. email: new FormControl(formState: null, validatorOrOpts: [Validators.required, Validators.email]),

src/app/login-page/login-page.component.ts:18:62 - error TS1005: ',' expected. email: new FormControl(formState: null, validatorOrOpts: [Validators.required, Validators.email]),

src/app/login-page/login-page.component.ts:19:42 - error TS1005: ',' expected. password: new FormControl(formState: null, validatorOrOpts: [Validators.required, Validators.minLength(minLength: 6)])

src/app/login-page/login-page.component.ts:19:65 - error TS1005: ',' expected. password: new FormControl(formState: null, validatorOrOpts: [Validators.required, Validators.minLength(minLength: 6)])

src/app/login-page/login-page.component.ts:19:119 - error TS1005: ',' expected. password: new FormControl(formState: null, validatorOrOpts: [Validators.required, Validators.minLength(minLength: 6)])

Angular CLI: 10.2.0 Node: 14.11.0 OS: darwin x64

new FormGroup(controls:{ ... does not seem to be a valid syntax. — Andrei Gătej
– Andrei Gătej, Commented Nov 4, 2020 at 16:14
@AndreiGătej I do the code from Udemy couse, but it was an old version of Angular. — J A S K I E R
– J A S K I E R, Commented Nov 4, 2020 at 16:16

Owen Kelvin · Accepted Answer · 2020-11-04 16:25:56Z

1

You can use FormBuilder to help with this

Steps to Implement

Inject FormBuilder

constructor (private fb: FormBuilder) {}

Call .group() function on the injected service to generate the FormGroup. This way you do not have to use new and everything works

ngOnInit() {
  this.form = this.fb.group({
    email: [null, [Validators.required, Validators.email]],
    password: [null, [Validators.required, Validators.minLength(6)]]
  })
}

See sample demo

answered Nov 4, 2020 at 16:25

Owen Kelvin

15.1k11 gold badges51 silver badges86 bronze badges

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

1 Comment

J A S K I E R Over a year ago

import {FormGroup, FormBuilder, Validators} from '@angular/forms'

J A S K I E R · Accepted Answer · 2020-11-04 20:49:10Z

0

This answer is also correct according to the question and code. Without any constructor.

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

Imports

  form: FormGroup

  ngOnInit() {
    this.form = new FormGroup({
      email: new FormControl(null, [Validators.required, Validators.email]),
      password: new FormControl(null, [Validators.required, Validators.minLength(6)])
    })
  }

Code

edited Nov 4, 2020 at 20:49

answered Nov 4, 2020 at 16:14

J A S K I E R

2,2344 gold badges29 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to set FormGroup and FormControl at the ngOnInit() with Angular?

2 Answers 2

Steps to Implement

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Steps to Implement

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related