angular dart 形式中的 ng-valid 和 ng-invalid 类 不再暴露
ng-valid and ng-invalid classes in angular dart forms are no more exposed
飞镖：1.24.2；
Angular：4.0.0；
我根据 .ng-valid 和 .ng-invalid class 以 angular 形式创建了一些 CSS 规则。但是，在最近的版本中，似乎 ng-valid 和 ng-invalid classes 不再公开，所以我的 CSS 规则不再起作用。
这是对的吗？
如果是，我该如何绕过此更改？
Edit1：测试用例
我只是在 IDE (WebStorm) 中生成了一个带有 angular 和 angular-material 的全新项目。它生成一个简单的待办事项应用程序。我拿了 todo_list_component.html 并用 <form> </form> 标签包裹了整个内容。在 todo_list_component.dart 中，我为 angular_forms 添加了一个导入，并将 formDirectives 添加到指令列表中。
在 dartium 中检查表单 no ng-valid class 已添加。唯一添加的 class，在我的例子中是：class="_ngcontent-umj-2"
Edit2：快捷方式
不是很优雅，但工作：
<form #form="ngForm" [class.ng-valid]="form.valid" [class.ng-invalid]="!form.valid">
不知道有没有曝光
首先我建议您使用 "Model driven forms" - 并在您的组件中设置验证。在我看来，它对 UnitTests 更好，更容易处理。
这里有一个例子：
指定 CSS (test.component.css) class:
.error {
border: 2px solid red;
}
组件（test.component.ts）：
imports ...;
@Component({
selector: 'test-component',
templateUrl: 'test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
form: FormGroup;
constructor(private navCtrl: NavController, private auth: AuthService, private toast: ToastController, private fb: FormBuilder) {
}
ngOnInit() {
this.form = this.fb.group({
email: ['', [
Validators.required,
Validators.email]],
password: ['', [
Validators.required,
Validators.minLength(6)]],
});
}
您的模板 (test.component.html) 如下所示：
<form [formGroup]="form" (ngSubmit)="login()" [ngClass]="{'error': !form.valid}">
*** YOUR FORM DIV'S HERE ***
</form>
我不知道这是否也适用于 Dart。但正如 Verena 评论的那样，如果您上传一些代码，我们可以为您提供最大帮助。
是的，此行为在 angular_forms 的最新版本中发生了变化。
以前，NgControlStatus 指令包含在 formDirectives 的列表中。但是，这导致每个使用表单的组件都为这些主机绑定付出代价。
现在，如果您想要这种行为，您需要将 NgControlStatus 显式包含在 @Component 的 directives 列表中。
飞镖：1.24.2；
Angular：4.0.0；
我根据 .ng-valid 和 .ng-invalid class 以 angular 形式创建了一些 CSS 规则。但是，在最近的版本中，似乎 ng-valid 和 ng-invalid classes 不再公开，所以我的 CSS 规则不再起作用。
这是对的吗？
如果是，我该如何绕过此更改？
Edit1：测试用例
我只是在 IDE (WebStorm) 中生成了一个带有 angular 和 angular-material 的全新项目。它生成一个简单的待办事项应用程序。我拿了 todo_list_component.html 并用 <form> </form> 标签包裹了整个内容。在 todo_list_component.dart 中，我为 angular_forms 添加了一个导入，并将 formDirectives 添加到指令列表中。
在 dartium 中检查表单 no ng-valid class 已添加。唯一添加的 class，在我的例子中是：class="_ngcontent-umj-2"
Edit2：快捷方式 不是很优雅，但工作：
<form #form="ngForm" [class.ng-valid]="form.valid" [class.ng-invalid]="!form.valid">
不知道有没有曝光
首先我建议您使用 "Model driven forms" - 并在您的组件中设置验证。在我看来，它对 UnitTests 更好，更容易处理。
这里有一个例子：
指定 CSS (test.component.css) class:
.error {
border: 2px solid red;
}
组件（test.component.ts）：
imports ...;
@Component({
selector: 'test-component',
templateUrl: 'test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
form: FormGroup;
constructor(private navCtrl: NavController, private auth: AuthService, private toast: ToastController, private fb: FormBuilder) {
}
ngOnInit() {
this.form = this.fb.group({
email: ['', [
Validators.required,
Validators.email]],
password: ['', [
Validators.required,
Validators.minLength(6)]],
});
}
您的模板 (test.component.html) 如下所示：
<form [formGroup]="form" (ngSubmit)="login()" [ngClass]="{'error': !form.valid}">
*** YOUR FORM DIV'S HERE ***
</form>
我不知道这是否也适用于 Dart。但正如 Verena 评论的那样，如果您上传一些代码，我们可以为您提供最大帮助。
是的，此行为在 angular_forms 的最新版本中发生了变化。
以前，NgControlStatus 指令包含在 formDirectives 的列表中。但是，这导致每个使用表单的组件都为这些主机绑定付出代价。
现在，如果您想要这种行为，您需要将 NgControlStatus 显式包含在 @Component 的 directives 列表中。