响应式表单基础

开始使用FormBuilder,我们必须首先确保我们正在使用正确的指令和正确的类,以利用程序式的表单。 为此,我们需要确保在应用程序模块的引导阶段中导入FormsModuleReactiveFormsModule

这将让我们访问组件,指令和providers,如FormBuilderFormGroupFormControl

在我们的例子中,将构建一个登录表单,我们看下面的内容:

app/login-form.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  username = new FormControl('')
  password = new FormControl('')

  loginForm: FormGroup = this.builder.group({
    username: this.username,
    password: this.password
  });

  constructor(private builder: FormBuilder) { }

  login() {
    console.log(this.loginForm.value);
    // Attempt Logging in...
  }
}

app/login-form.component.html

<form [formGroup]="loginForm" (ngSubmit)="login()">
  <label for="username">username</label>
  <input type="text" name="username" id="username" [formControl]="username">

  <label for="password">password</label>
  <input type="password" name="password" id="password" [formControl]="password">

  <button type="submit">log in</button>
</form>

View Example

FormControl

请注意,FormControl类被分配到类似命名的字段,无论是在此还是在FormBuilder#group({ })方法中。 这主要是为了方便访问。 通过保存thisFormControl实例的引用,您可以访问模板中的输入,而无需引用表单本身。 否则,可以通过使用loginForm.controls.usernameloginForm.controls.password在模板中访问表单字段。 同样,此情况下的任何FormControl实例都可以通过使用其.root属性(例如username.root.controls.password)访问其父组。

确保root和控件在使用之前存在。

FormControl需要两个属性:初始值和验证器列表。 现在,我们没有验证。 这将在后续步骤中添加。

results matching ""

    No results matching ""