Angular 2 RC4中的表格 [英] Forms in Angular 2 RC4

问题描述

我正在Angular 2 RC4中试用表格. 一切正常，但是当我启动应用程序时，浏览器控制台会显示以下消息:

I am experimenting with forms in Angular 2 RC4. It's all working fine but when I start the app the browser console gives me this message:

*It looks like you're using the old forms module. This will be opt-in in the next RC, and will eventually be removed in favor of the new forms module.

我组件的相关部分如下:

The relevant part of my component looks like this:

import {
    FORM_DIRECTIVES,
    REACTIVE_FORM_DIRECTIVES,
    FormBuilder,
    FormGroup
} from '@angular/forms';
import {Observable} from "rxjs/Rx";

@Component
({
    selector: "hh-topbar",
    moduleId: module.id,
    templateUrl: "topBar.component.html",
    directives: [HHPagerComponent, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES]
})

export class HHTopBarComponent implements OnChanges, OnInit
{
    ...
    private filterForm: FormGroup;
    private title$: Observable<string>;

    constructor(private formBuilder: FormBuilder)
    {
    }

    public ngOnInit(): any
    {
        this.filterForm = this.formBuilder.group
        ({
            "title": [this.info.filters.searchFileName]
        });

        this.title$ = this.filterForm.controls["title"].valueChanges;
        this.title$.subscribe(val =>
        {
            this.info.filters.searchFileName = val;
            this.filterChanged.emit(this.info.filters);
        });
    }
}

模板的相关部分如下所示:

And the relevant part of my template looks like this:

<form [formGroup]="filterForm">
    <div>
        <label for="title">Title</label>
        <input [formControl]="filterForm.controls['title']" id="title" />
    </div>
</form>

这里有人知道警告正在谈论的新表单模块是什么，哪些指令将更改以及更改为什么?

Does anybody here know what is the new forms module the warning is talking about and which directives will change and to what?

推荐答案

在引导应用程序时，您需要显式禁用弃用的表单支持:

You need to explicitly disable the deprecated form support when bootstrapping your application:

import {disableDeprecatedForms, provideForms} from '@angular/forms';

bootstrap(AppComponent, [
  disableDeprecatedForms()
  provideForms()
]);

不推荐使用FormBuilder，而可以直接使用FormGroup类:

Whereas FormBuilder isn't deprecated, you can use directly the FormGroup class instead:

this.filterForm = new FormGroup({
  title: new FormControl('', Validators.required)
});

这篇关于Angular 2 RC4中的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！