TS 和 HTML 之间的 FormGroup 绑定

Question

我第一次尝试在 Angular

中制作 Reactive 表单

这是代码：

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

@Component({
  selector: 'app-username-password',
  templateUrl: './username-password.component.html',
  styleUrls: ['./username-password.component.scss']
})
export class UsernamePasswordComponent implements OnInit {

  loginForm = new FormGroup({
    userName : new FormControl("Ashish"),
    password : new FormControl("")

  });

  // constructor() { }

  ngOnInit() {
  }

}

和HTML

<div class="container">
    <h2>Login Form</h2>
    <form [formGroup]="loginForm">
        <label> User Name</label>
        <input formControlName="userName" , type="text" , class="form-control">
    </form>
    {{loginForm.value | json}}
</div>

HTML 没有显示任何内容。

有没有错？

我在评论中收到这个错误

此致，阿希什

Answer 1

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

@Component({
  selector: 'app-username-password',
  templateUrl: './username-password.component.html',
  styleUrls: ['./username-password.component.scss']
})

export class UsernamePasswordComponent implements OnInit {

  loginForm: FormGroup;

  // constructor() { }

  ngOnInit() {
        this.loginForm = new FormGroup({
          userName : new FormControl("Ashish"),
          password : new FormControl("")
        });
  }

}

Answer 2

您需要在组件所在的AppModule或特定模块中导入ReactiveFormsModule

例如：

...

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

...

@NgModule({
  imports: [
    ...,
    ReactiveFormsModule,
    ...,
  ],
  declarations: [...],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 3

从错误来看，在我看来您没有在包含此组件的模块中导入 ReactiveFormsModule。

Answer 4

您应该像这样将 ReactiveFormsModule 添加到您的 app.module.ts 中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';



@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { 

}

TS 和 HTML 之间的 FormGroup 绑定

FormGroup binding between TS and HTML

angular

angular-reactive-forms

angular-forms