CODEWITHSUNDEEP
angular
Tampa
Tampa

Reputation: 78244

angular2 rc6 forms and validation - red line around whole form too

I upgraded to rc6 and my form has issues.

If I put e.g. min len of 1 and click out of the box I get a validation error. Great! But I get a red line around the WHOLE form too. It looks horrible. Why? I just want the input field with the val error highlighted.

Here is my ts code:

myForm: FormGroup;
constructor(
            private route: ActivatedRoute,
            private fb: FormBuilder,
            private _router: Router,
            private _apiService: ApiService) {


            this.myForm = fb.group({
                name: ['',[Validators.required]]  
            })

}

Below is my html code:

<div class="row">
    <div class="col-md-6 well">
       <form [formGroup]="myForm"  (ngSubmit)="onSubmit()" autocomplete="off" novalidate>

            <fieldset>
                <legend>
                    {{ title }}
                </legend>
                <div class="form-group">
                    <label>Name</label>
                    <input formControlName="name" [(ngModel)]="model.name" type="text"  class="form-control" minlength="2">
                    <div *ngIf="myForm.controls.name.touched && myForm.controls.name.errors">
                        <div *ngIf="myForm.controls.name.errors?.required" class="alert alert-danger">
                            Name is required.
                        </div>

                        <div *ngIf="myForm.controls.name.errors.minlength" class="alert alert-danger">
                            Name should be {{ myForm.controls.name.errors.minlength.requiredLength }}
                        </div>
                    </div>
                </div>
            </fieldset>

        <button [disabled]="!myForm.valid" type="submit" class="btn btn-lg btn-primary-outline">
                Next: Intial Model Parameters
        </button>

        </form>
    </div>
</div>

Upvotes: 0

Views: 410

Answers (1)

pardahlman
pardahlman

Reputation: 1454

I believe this is because as of RC6, the form DOM element gets the class ng-invalid if any child controller is invalid. You should be able to fix this by updating your styles to exclude the form element.

Upvotes: 1

Related Questions