AngularDart:使用 Reactive Form Builder 创建表单
AngularDart: Creating a Form with Reactive Form Builder
我正在尝试使用 AngularDart 5
、angular_forms 2
创建。 API 似乎与 angular_forms 1
非常不同,我不知道如何使用 FormBuilder
和 ControlGroup
创建 FormGroup
。下面是我的代码。
LoginComponent.dart
import 'dart:convert';
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
@Component(
selector: 'login-comp',
templateUrl: 'login_component.html',
styleUrls: ['login_component.css'],
directives: [formDirectives, coreDirectives])
class LoginComponent implements OnInit {
ControlGroup ctrlGrp;
LoginComponent() {
this._createForm();
}
void _createForm() {
final email = Control<String>('', Validators.required);
final password = Control<String>(
'', Validators.compose([Validators.required, Validators.minLength(8)]));
this.ctrlGrp =
FormBuilder.controlGroup({'email': email, 'password': password});
}
@override
void ngOnInit() {}
void submit() {}
}
login_component.html
<div class="container d-flex justify-content-center align-times-center">
<div class="form-wrapper text-center">
<h2 class="text-center">Login</h2>
<form novalidate #f="ngForm" (ngSubmit)="submit()">
<div ngControlGroup="ctrlGrp">
<div class="form-group">
<input type="email" ngControl="email" class="form-control" id="email-input"
placeholder="Enter Email" formControlName="email"/>
</div>
<div class="form-group">
<input type="password" ngControl="password" class="form-control" id="password-input"
placeholder="Enter Password" formControlName="password"/>
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!f.valid">Submit</button>
</form>
<small><a [routerLink]="'/signup'">Need an Account?</a></small>
</div>
</div>
pubspec.yaml
environment:
sdk: '>=2.0.0 <3.0.0'
dependencies:
angular: ^5.0.0
ng_bootstrap: ^1.1.1
sass_builder: ^2.0.0
angular_router: ^2.0.0-alpha+19
angular_forms: ^2.1.1
dev_dependencies:
angular_test: ^2.0.0
build_runner: ^1.0.0
build_test: ^0.10.2
build_web_compilers: ^0.4.0
test: ^1.0.0
- 如何用
angular_forms 2
创建一个 FormGroup
?
- 如何将组绑定到 html 模板中的
formGroup
属性?
谢谢。
在@ebelair 的帮助下我找到了答案。
我漏掉了 [ngFormModel]="loginForm"
部分。
下面是工作代码。
login_component.dart
@Component(
selector: 'login-comp',
templateUrl: 'login_component.html',
styleUrls: ['login_component.css'],
directives: [formDirectives, coreDirectives, routerDirectives])
class LoginComponent implements OnInit {
ControlGroup loginForm;
LoginComponent() {
this._createForm();
}
void _createForm() {
final email = Control<String>('', Validators.required);
final password = Control<String>('', Validators.compose([Validators.required, Validators.minLength(8)]));
this.loginForm = FormBuilder.controlGroup({'email': email, 'password': password});
}
@override
void ngOnInit() {}
void submit() {
print(this.loginForm.value['email']);
print(this.loginForm.value['password']);
}
}
login_component.html
<div class="container d-flex justify-content-center align-times-center">
<div class="form-wrapper text-center">
<h2 class="text-center">Login</h2>
<form novalidate [ngFormModel]="loginForm" (ngSubmit)="submit()">
<div>
<div class="form-group">
<input type="email" ngControl="email" class="form-control" id="email-input"
placeholder="Enter Email" formControlName="email"/>
</div>
<div class="form-group">
<input type="password" ngControl="password" class="form-control" id="password-input"
placeholder="Enter Password" formControlName="password"/>
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!loginForm.valid">Submit</button>
</form>
<small><a [routerLink]="'/signup'">Need an Account?</a></small>
</div>
</div>
希望对您有所帮助。
在表单标签中添加 ngFormModel:
<form novalidate #f="ngForm" (ngSubmit)="submit()" [ngFormModel]="ctrlGrp"></form>
我正在尝试使用 AngularDart 5
、angular_forms 2
创建。 API 似乎与 angular_forms 1
非常不同,我不知道如何使用 FormBuilder
和 ControlGroup
创建 FormGroup
。下面是我的代码。
LoginComponent.dart
import 'dart:convert';
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
@Component(
selector: 'login-comp',
templateUrl: 'login_component.html',
styleUrls: ['login_component.css'],
directives: [formDirectives, coreDirectives])
class LoginComponent implements OnInit {
ControlGroup ctrlGrp;
LoginComponent() {
this._createForm();
}
void _createForm() {
final email = Control<String>('', Validators.required);
final password = Control<String>(
'', Validators.compose([Validators.required, Validators.minLength(8)]));
this.ctrlGrp =
FormBuilder.controlGroup({'email': email, 'password': password});
}
@override
void ngOnInit() {}
void submit() {}
}
login_component.html
<div class="container d-flex justify-content-center align-times-center">
<div class="form-wrapper text-center">
<h2 class="text-center">Login</h2>
<form novalidate #f="ngForm" (ngSubmit)="submit()">
<div ngControlGroup="ctrlGrp">
<div class="form-group">
<input type="email" ngControl="email" class="form-control" id="email-input"
placeholder="Enter Email" formControlName="email"/>
</div>
<div class="form-group">
<input type="password" ngControl="password" class="form-control" id="password-input"
placeholder="Enter Password" formControlName="password"/>
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!f.valid">Submit</button>
</form>
<small><a [routerLink]="'/signup'">Need an Account?</a></small>
</div>
</div>
pubspec.yaml
environment:
sdk: '>=2.0.0 <3.0.0'
dependencies:
angular: ^5.0.0
ng_bootstrap: ^1.1.1
sass_builder: ^2.0.0
angular_router: ^2.0.0-alpha+19
angular_forms: ^2.1.1
dev_dependencies:
angular_test: ^2.0.0
build_runner: ^1.0.0
build_test: ^0.10.2
build_web_compilers: ^0.4.0
test: ^1.0.0
- 如何用
angular_forms 2
创建一个FormGroup
? - 如何将组绑定到 html 模板中的
formGroup
属性?
谢谢。
在@ebelair 的帮助下我找到了答案。
我漏掉了 [ngFormModel]="loginForm"
部分。
下面是工作代码。
login_component.dart
@Component(
selector: 'login-comp',
templateUrl: 'login_component.html',
styleUrls: ['login_component.css'],
directives: [formDirectives, coreDirectives, routerDirectives])
class LoginComponent implements OnInit {
ControlGroup loginForm;
LoginComponent() {
this._createForm();
}
void _createForm() {
final email = Control<String>('', Validators.required);
final password = Control<String>('', Validators.compose([Validators.required, Validators.minLength(8)]));
this.loginForm = FormBuilder.controlGroup({'email': email, 'password': password});
}
@override
void ngOnInit() {}
void submit() {
print(this.loginForm.value['email']);
print(this.loginForm.value['password']);
}
}
login_component.html
<div class="container d-flex justify-content-center align-times-center">
<div class="form-wrapper text-center">
<h2 class="text-center">Login</h2>
<form novalidate [ngFormModel]="loginForm" (ngSubmit)="submit()">
<div>
<div class="form-group">
<input type="email" ngControl="email" class="form-control" id="email-input"
placeholder="Enter Email" formControlName="email"/>
</div>
<div class="form-group">
<input type="password" ngControl="password" class="form-control" id="password-input"
placeholder="Enter Password" formControlName="password"/>
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!loginForm.valid">Submit</button>
</form>
<small><a [routerLink]="'/signup'">Need an Account?</a></small>
</div>
</div>
希望对您有所帮助。
在表单标签中添加 ngFormModel:
<form novalidate #f="ngForm" (ngSubmit)="submit()" [ngFormModel]="ctrlGrp"></form>