如何在带有角的FormGroup ()处设置FormControl和ngOnInit？

Question

我刚刚开始学习角，旧版本应该能工作：

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() {

  }

}

错误：

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)])

角CLI: 10.2.0节点: 14.11.0操作系统:达尔文x64

Answer 1

您可以使用FormBuilder来帮助解决这个问题。

实施步骤

• 注射FormBuilder

constructor (private fb: FormBuilder) {}

• 调用注入服务上的.group()函数来生成FormGroup。这样您就不必使用new了，一切都可以正常工作。

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

见示例演示

Answer 2

根据问题和代码，这个答案也是正确的。不带任何构造函数。

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

导入

  form: FormGroup

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

代码