Question

飞镖：1.24.2; 角度：4.0.0; 我基于角形式的.ng-valid和.ng-invalid类创建了一些CSS规则。但是，在上一版本中，似乎ng-valid和ng-invalid类不再暴露，因此我的CSS规则不再有效。这是对的吗？如果是的话，我怎么能绕过这个改变呢？

Edit1：测试用例我只是在IDE（WebStorm）中使用角度和角度材质生成了一个全新的项目。它生成一个简单的待办事项应用程序。我使用了todo_list_component.html，并使用<form> </form>标记整理了整个内容。在todo_list_component.dart中，我为angular_forms添加了一个导入，并将formDirectives添加到指令列表中。在dartium中检查表单没有添加ng-valid类。在我的例子中，唯一添加的类是：class="_ngcontent-umj-2"

Edit2：快捷方式不是很优雅，但工作：

<form #form="ngForm" [class.ng-valid]="form.valid" [class.ng-invalid]="!form.valid">

Answer 1

是的，此行为在最新版本的angular_forms中已更改。

以前，NgControlStatus指令已包含在formDirectives列表中。但是，这会导致使用表单的每个组件为这些主机绑定付出代价。

现在，如果您想要这种行为，则需要在NgControlStatus的{{1}}列表中明确包含directives。

https://github.com/dart-lang/angular/blob/master/angular_forms/lib/src/directives/ng_control_status.dart#L15

Answer 2

我不知道他们是否被暴露。

首先，我建议你使用＆＃34;模型驱动的表格＆＃34; - 并在组件中设置验证。在我看来，它对UnitTests更好，更容易处理。

这是一个例子：

指定CSS（test.component.css）类：

.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评论的那样，如果您上传一些代码，我们可以为您提供最大帮助。

角斗式表格中的ng-valid和ng-invalid类不再暴露

2 个答案: