使用模型驱动的表单和验证

Question

我有这样的表单控制：

<div class="form-group" [class.has-error]="!orderForm.controls.persons.controls[0].controls.firstName.valid && orderForm.controls.persons.controls[0].controls.firstName.touched" [formGroupName]="0">
        <label class="control-label">First Name</label>
        <input type="text" class="form-control" formControlName="firstName" required />
</div>

由于[class.has-error]="!orderForm.controls.persons.controls[0].controls.firstName.valid && orderForm.controls.persons.controls[0].controls.firstName.touched 太长，是否有更简单、更短的方法来设置 has-error 类？

组件定义如下：

   @Component({
        moduleId: module.id,
        selector: 'order-form',
        templateUrl: 'order-form.component.html'
    })
    export class OrderFormComponent implements OnInit {
        orderForm: FormGroup;
        visitorsType: FormControl;
        startDate: FormControl;
        endDate: FormControl;
        persons: FormArray;
        duration: FormControl;
...

而表单初始化是这样的：

    ...
    constructor(private _quotesService: QuotesService, 
                private _formBuilder: FormBuilder) { }

    ngOnInit() {

            this.persons = this._formBuilder.array([]);

            this.orderForm = this._formBuilder.group({
                persons: this.persons,
            });

            (<FormArray>this.orderForm.controls['persons']).push(this.initVisitor(this.startDate.value));

            this.activate();
    }
    ...

Answer 1

Angular2 自己添加了一些 CSS 类。您正在寻找的是 ng-invalid。如果在模型中连接到您的控件的验证器将返回 false，则将添加此类。您不需要使用自己的“has-error”类。