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?
Angular 8 supports two types of forms. They are Template driven forms and Reactive forms.
Angular forms are used to log in, update a profile, enter sensitive information, and perform many other data-entry tasks.
In Angular 7, there are 2 approaches to handle user's input through forms: Reactive forms. Template-driven forms.
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.
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)
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With