Question

我正在使用Angular 2（RC.3）创建表单，但ngForm指令无法获取默认值（value属性）。

// app.component.html
<form (ngSubmit)="onSubmit(editForm.value)" #editForm="ngForm">
  <input ngControl="firstName" type="text" value="{{user?.firstName}}">
  <input ngControl="lastName" type="text" value="{{user?.lastName}}">

  <input type="submit" value="Edit">
</form>

// app.component.ts
...
export class AppComponent {
  public user: UserModel;

  constructor(private _api: ApiService) {
    // Get user data.
    this._api.get('/users/self').subscribe(
      (user: UserModel): void => { this.user = user; }
    );
  }
  onSubmit(user: UserModel): void {
    console.log(user);
  }
}

如果user对象具有用户数据，则input元素设置为firstName用户对象的值。当我不输入并且不更改input元素的值（即使用value属性值）时，editForm.value没有如下所示的值。

{ firstName: null, lastName: null }

当我更改input元素的值时，editForm.value会检测其更改并设置值。我该怎么办？

另外，我不明白如何正确使用ngControl和ngModel。我知道ngControl提供了验证和操作状态，ngModel提供了同步表示层模型，但我完全不理解ngControl和ngModel之间的区别。

我认为我们只能使用ngControl来获取表单值，因此不需要ngModel和双向绑定...

Answer 1

试试这个组件：

// app.component.ts
import { Component } from "@angular/core";
import { FormBuilder, ControlGroup, Validators} from "@angular/common";
import { ApiService } from "./services/api-service";
import { UserModel } from "./models/user-model";

@Component({
    templateUrl: "app.component.html",
    providers: [ApiService],
})
export class PlayerPage {

    user: UserModel;
    userForm: ControlGroup;

    constructor(private _api: ApiService, fb: FormBuilder) {

        // initialize to a new, blank user
        this.user = new UserModel();

        // get the user
        this._api.get("users/self").subscribe((user: UserModel): void => {
            this.user = user;
        });

        // create a control group for the form
        this.userForm = fb.group({
            firstName: [this.user.firstName, Validators.required],
            lastName:  [this.user.lastName,  Validators.required]
        });
    }

    onSubmit($event, user) {
        $event.preventDefault();
        console.log(user);
    }
}

在你的模板中：

// app.component.html
<form [ngFormModel]="userForm" (submit)="onSubmit($event, user)">
    <input ngControl="firstName" [(ngModel)]="user.firstName" />
    <input ngControl="lastName"  [(ngModel)]="user.lastName"  />
    <input type="submit" value="Edit" [disabled]="!userForm.valid" />
</form>

一个问题可能是API调用没有及时返回，因此没有数据填充表单。否则，当表单无效时，此表单上的提交按钮将被禁用，在这种情况下，如果两个字段中的任何一个为空白。

ngControl无法在Angular2中获取默认值

1 个答案: