我一直在推迟从已弃用的表单api到@ angular / forms中的新表单api的升级 . 我刚刚升级到RC6,现在也想开始使用@ angular / forms .
此时文档非常稀缺,而且我很快陷入困境 .
这就是我的工作表格:
<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>
在与此模板关联的Component上,FORM_DIRECTIVES在组件的“directives”属性中指定,这是提供ngFormControl指令等的...
如果我理解正确,Control和ControlGroup被重命名为FormControl和FormGroup,并且指令名称也被重命名(ngFormControl等) . 所以我更新了我的表格 . 我用formGroup替换了ngFormModel,并替换为:
[ngFormControl]="registrationForm.controls['email']"
通过
formControlName="email"
导致这种形式:
<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>
但这给了我这个错误:
无法绑定到'formGroup',因为它不是'form'的已知属性 .
我查看了角度代码,我在一些评论中找到了一个提示导入REACTIVE_FORM_DIRECTIVES的示例 . 但是我无法导入这个(它是否在RC6中重命名或删除了?),我希望我已经有了这个,因为我的app模块导入了FormsModule(这不是导致整个模块的东西被引入的原因吗?):
@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 {}
有没有人知道如何进行?
编辑:所以,问题已得到解答 . 但对于其他进行相同升级的人:
-
确保导入FormsModule和ReactiveFormsModule
-
用[formGroup]替换[ngFormModel]
-
在元素上添加formGroupName以反映控件组
-
用formControlName替换[ngFormControl]
formControlname的值只是控件的名称,您不需要再指定组名称,这是由formGroupName属性处理的 .
3 回答
REACTIVE_FORM_DIRECTIVES
已在RC6中弃用并删除 . 您需要导入FormsModule
和ReactiveFormsModule
:还要在代码中导入ReactiveFormsModule . 问题如同您所说:REACTIVE_FORM_DIRECTIVES在RC6中已弃用 .
您可以在此处使用新的Forms API找到一堆表单示例:https://github.com/Farata/angular2typescript/tree/master/chapter7/form-samples