CODEWITHSUNDEEP
javascriptformsangularangular2-forms
Davy
Davy

Reputation: 6441

Upgrading to @angular/forms in RC6

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:

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.

Upvotes: 3

Views: 3565

Answers (3)

Milen Louis
Milen Louis

Reputation: 223

Do import ReactiveFormsModule also in your code. The issue is as you said : REACTIVE_FORM_DIRECTIVES is deprecated in RC6.

Upvotes: 2

Yakov Fain
Yakov Fain

Reputation: 12378

You can find a bunch of forms samples with the new Forms API here: https://github.com/Farata/angular2typescript/tree/master/chapter7/form-samples

Upvotes: 1

j2L4e
j2L4e

Reputation: 7050

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

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

Upvotes: 10

Related Questions