Q:

angular2 ngClass not setting background color for the form

Im trying to set the background color using ngClass but ngClass cannot set the background inside the form.When try out set the background color outside the form it is working fine.
The below code is not working
<div [ngClass]="{bgcolor:true}">
<div class="container">

    <form class="register-form" (ngSubmit)="onsubmit(f)" #f="ngForm" novalidate>
   <div class="row">
       <div class="col-md-4 col-sm-4 col-lg-4">
       <h1>Registration</h1>
       </div>
   </div>
        <div class="row">
            <div class="col-md-4 col-sm-4 col-lg-4">
                <label for="firstName">FIRST NAME</label>
                <input name="firstName" id="firstname" class="form-control" type="text" [(ngModel)]="user.firstname" required pattern="[A-Za-z]+" #firstName="ngModel">
                <div *ngIf="!firstName?.valid && (firstName?.dirty ||firstName?.touched)" class="calert alert-danger">
                    <div [hidden]="!firstName.errors.required">
                        First Name is required
                    </div>
                    <div [hidden]="!firstName.errors.pattern">
                        Only alphabets are allowed
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-4 col-lg-4">
                <label for="lastname">LAST NAME</label>
                <input name="lastname" id="lastname" [(ngModel)]="user.lastname" class="form-control" type="text" pattern="[A-Za-z]+" required #lastname="ngModel">
                <div *ngIf="!lastname?.valid && (lastname?.dirty ||lastname?.touched)" class="calert alert-danger">
                    <div [hidden]="!lastname.errors.required">
                        Last Name is required
                    </div>
                    <div [hidden]="!lastname.errors.pattern">
                        Only alphabets are allowed
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-4 col-lg-4">
                <label for="email">EMAIL ADDRESS</label>
                <input name="email" id="email" [(ngModel)]="user.email" class="form-control" type="email" #email="ngModel" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?">
                <div *ngIf="!email?.valid && (email?.dirty ||email?.touched)" class="calert alert-danger">
                    <div [hidden]="!email.errors.required">
                        Email is required
                    </div>
                    <div [hidden]="!email.errors.pattern">
                        Enter valid email id
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-4 col-lg-4">
                <label for="mobile">MOBILE NUMBER</label>
                <input name="mobile" id="mobile" #mobile="ngModel" [(ngModel)]="user.mobile" class="form-control" type="text" required pattern="[789][0-9]{9}">
                <div *ngIf="!mobile?.valid && (mobile?.dirty ||mobile?.touched)" class="calert alert-danger">
                    <div [hidden]="!mobile.errors.required">
                        Mobile number is required
                    </div>
                    <div [hidden]="!mobile.errors.pattern">
                        Enter valid mobile number
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-4 col-lg-4">
                <label for="gender">GENDER</label>
                <div class="radio" *ngFor="let g of genders">
                    <label>
                    <input type="radio" name="gender" required class="form-control radioheight" [(ngModel)]="user.gender"  [value]="g" >{{g}}
                    </label>
                    <div *ngIf="!gender?.valid && (gender?.dirty ||gender?.touched)" class="calert alert-danger">
                        <div [hidden]="!gender.errors.required">
                            Gender is required
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-4 col-lg-4">
                <label for="password">PASSWORD</label>
                <input name="password" id="password" #password="ngModel" [(ngModel)]="user.password" class="form-control" type="password" required pattern=".{5,10}">
                <div *ngIf="!password?.valid && (password?.dirty ||password?.touched)" class="calert alert-danger">
                    <div [hidden]="!password.errors.required">
                        Password is required
                    </div>
                    <div [hidden]="!password.errors.pattern">
                        Contain 5 to 10 characters
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <input type="hidden" name="role" id="role" [(ngModel)]="user.role" class="form-control">
        </div>
        <hr>
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
                <button type="submit" [disabled]="!f.valid" class="btn btn-default regbutton">Register</button>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
           <button (click)="onclick()" class="btn btn-default logbutton">Sign in</button>           
          </div>  
        </div>
    </form>
</div>
</div>

But when i try to set outside the form like below it is working
<div [ngClass]="{bgcolor:true}">
<p>test</p>
</div>

component.css
    .bgcolor{
         background-color:#194c4f;
        font-family: 'Open Sans Condensed', sans-serif;
        font-size: 18px;

    }
.register-form{
    font-size: 16px;
   left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.regbutton{
    height: 50px;
    width: 100px;
    background-color:tomato;
    border-radius: 0px;
    font-size: 18px;
    color:white;
    border: none !important;
    margin-bottom: 5px;
    margin-left: 110px;
}
.regbutton:hover{
    color: white;
    background-color:#aa422f;
}
.regbutton:active{
    color: white;
    background-color:#aa422f;
}
.logbutton{
    height: 50px;
    width: 100px;
    background-color:yellowgreen;
    border-radius: 0px;
    font-size: 18px;
    color:white;
    border: none !important;
    margin-bottom: 5px;
}
.logbutton:hover{
    color: white;
    background-color:darkolivegreen;
}
.logbutton:active{
    color: white;
    background-color:darkolivegreen;
}

.register-form label,h1{
    color: aliceblue;

}
.register-form input{
    margin-bottom: 5px;
    width: 430px;
    height: 40px;
    border-radius: 0px;
}

.radioheight
{
  height: 15px !important;
  margin-left: 10px;
}

I dnt know whats worng help me thanks in advance

A:

First, your div with ngClass didn't have a size property.
Then, the form element has a property of position: absolute;.
Above two reason will make your form been positioned outside the div in some situation.
take a look at this plunker.

