CODEWITHSUNDEEP
angularangular2-forms
Nikola Yankov
Nikola Yankov

Reputation: 1304

Working with model-driven form and validation

I am having form control like this:

<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>

Is there easier and shorter way to set the has-error class, since [class.has-error]="!orderForm.controls.persons.controls[0].controls.firstName.valid && orderForm.controls.persons.controls[0].controls.firstName.touched is way too long?

The component is defined like this:

   @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;
...

And form initialization is like this: 

    ...
    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();
    }
    ...

Upvotes: 1

Views: 386

Answers (1)

Celebes
Celebes

Reputation: 1431

Angular2 adds some CSS classes on its own. The one you are looking for is ng-invalid. If validator connected to your Control in the model will return false, this class will be added. You don't need to use your own "has-error" class.

Upvotes: 2

Related Questions