Upgrading to @angular/forms in RC6

Question

I've been postponing the upgrade from the deprecated forms api to the new forms api in @angular/forms. I just upgraded to RC6 and also want to start using @angular/forms now.

Documentation is very scarce at this point, and im getting stuck quite fast.

This is what my working form looked like:

<form [ngFormModel]="registrationForm" (ngSubmit)="register(registrationForm.value)">
    <fieldset class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="email" [ngFormControl]="registrationForm.controls['email']" maxlength="128" required>
    </fieldset>
    <div class="alert alert-warning" role="alert" *ngIf="registrationResponse && registrationResponse.EmailExists">
      This email account is already linked to an account! <a [routerLink]="['/user/logon']">Go here to login</a>.
    </div>
    <fieldset class="form-group">
        <label for="username">User name</label>
        <input type="text" class="form-control" id="username" placeholder="user name" [ngFormControl]="registrationForm.controls['username']" maxlength="32" required>
    </fieldset>
    <div class="alert alert-warning" role="alert" *ngIf="registrationResponse && registrationResponse.UsernameExists">
      This username is already taken! Please choose another one.
    </div>
    <div>
        <button type="submit" class="btn btn-primary" [disabled]="!registrationForm.valid">register</button>
    </div>
</form>

On the Component associated to this template, FORM_DIRECTIVES was specified in the "directives" attribute of the component, which is what provided the ngFormControl directives etc ...

If i understood correctly, Control and ControlGroup were renamed to FormControl and FormGroup, and also the directive names were renamed (ngFormControl etc). So i updated my form. I replaced ngFormModel by formGroup, and replace this:

[ngFormControl]="registrationForm.controls['email']"

by

formControlName="email"

Resulting in this form:

<form [formGroup]="registrationForm" (ngSubmit)="register(registrationForm.value)">
    <fieldset class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="email" formControlName="email" maxlength="128" required>
    </fieldset>
    <div class="alert alert-warning" role="alert" *ngIf="registrationResponse && registrationResponse.EmailExists">
      This email account is already linked to an account! <a [routerLink]="['/user/logon']">Go here to login</a>.
    </div>
    <fieldset class="form-group">
        <label for="username">User name</label>
        <input type="text" class="form-control" id="username" placeholder="user name" formControlName="username" maxlength="32" required>
    </fieldset>
    <div class="alert alert-warning" role="alert" *ngIf="registrationResponse && registrationResponse.UsernameExists">
      This username is already taken! Please choose another one.
    </div>
    <div>
        <button type="submit" class="btn btn-primary" [disabled]="!registrationForm.valid">register</button>
    </div>
</form>

But this gives me this error:

Can't bind to 'formGroup' since it isn't a known property of 'form'.

I have looked at the angular code, and i found a sample in some comments that mentions importing REACTIVE_FORM_DIRECTIVES. But i am unable to import this (is it renamed or removed in RC6?), and i would expect that i already have this, since my app module import FormsModule (isnt that the reason why this whole modules thing was introduced?):

@NgModule({
    imports:      [BrowserModule, FormsModule, HttpModule, appRouterRoot],
    providers:    [ApiService, LocalStorageService, AuthenticationService, UserService, ForumService],
    declarations: [
        RootComponent,
        RegistrationComponent,
        [omitted some components for brevity ....]
    ],
    bootstrap:    [RootComponent],
})
export class AppModule {}

Does anyone have any idea on how to proceed?

Edit: so, question has been answered. But for anyone else making the same upgrade:

Make sure you import FormsModule and ReactiveFormsModule
Replace [ngFormModel] by [formGroup]
Add formGroupName on elements to reflect the control group
Replace [ngFormControl] by formControlName

The value of formControlname is just the name of the control, you dont need to specify the group name anymore sine this is handled by the formGroupName attribute.

you don't need to import both FormsModule and ReactiveFormsModule. If you're doing template-driven then FormsModule, if model-driven then ReactiveFormsModule. — John Baird

j2L4e j2L4e · Accepted Answer · 2016-09-02T12:24:12

REACTIVE_FORM_DIRECTIVES were deprecated and removed in RC6. You need to import FormsModule and ReactiveFormsModule:

@NgModule({
  import: [
    ...,
    FormsModule,
    ReactiveFormsModule
  ]
})

Upgrading to @angular/forms in RC6

3 Answers