Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Forms in Angular 2 RC4

Tags:

angular

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?

like image 344
hholtij Avatar asked Jul 05 '16 07:07

hholtij


People also ask

What are the types of forms in angular?

Angular 8 supports two types of forms. They are Template driven forms and Reactive forms.

What is the main purpose of angular forms?

Angular forms are used to log in, update a profile, enter sensitive information, and perform many other data-entry tasks.

How many types of angular 7 forms are there?

In Angular 7, there are 2 approaches to handle user's input through forms: Reactive forms. Template-driven forms.

What is form controller in angular?

What are form controls in Angular? In Angular, form controls are classes that can hold both the data values and the validation information of any form element. Every form input you have in a reactive form should be bound by a form control. These are the basic units that make up reactive forms.


1 Answers

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

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

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

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

this.filterForm = new FormGroup({
  title: new FormControl('', Validators.required)
});
like image 52
Thierry Templier Avatar answered Oct 24 '22 05:10

Thierry Templier