kfmc_website/src/app/dashboard/roles/add-roles/add-roles.component.html

<div class="addRole-w">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <ul class="list-unstyled titileLi-w">
          <li class="headingText-w">خدمه الصلاحيات </li>
          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">المجموعات</li>
          <li class="headingText-w activeLi-w" style="margin-right:5px">  {{typeLink}} </li>
        </ul>
      </div>
    </div>

    <div class="containerContent-w">
      <div class="row" style="margin-top:30px;">
        <div class="col-12">
          <form (ngSubmit)="onSubmitted()" #f="ngForm">
              <div class="row">

                <div class="col-12 col-sm-12 col-md-4">
                  <div class="form-group">
                    <label style="float: right; margin: 5px 0">الاسم <span class="spanReqired-w">*</span></label>
                    <input type="text" class="form-control" name="role_name" placeholder="الأسم" ngModel required  #name="ngModel" [ngModel]="user.roleName"/>
                  </div>
                </div>
                <div class="col-12 col-sm-12 col-md-4">
                    <div class="form-group">
                      <label style="float: right;margin: 5px 0">الحاله <span class="spanReqired-w">*</span></label>
                      <select class="form-control" ngModel name="status" [ngModel]="user.statusRole" required>
                        <option [value]="1">فعال</option>
                        <option [value]="0">غير فعال</option>
                      </select>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-4">
                    <div class="form-group">
                      <label style="float: right;margin: 5px 0">الأنظمه</label>
                      <select class="form-control" [ngModel]="serviceVal" name="service_val" (change)="onSelectChange($event)">
                          <option *ngFor="let service of pages" [value]="service.id">{{service.name}}</option>
                      </select>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-4">
                    <div class="form-group">
                      <label style="float: right; margin: 5px 0">الوصف</label>
                      <textarea class="form-control" cols="3" ngModel name="description" [ngModel]="user.descriptionRole"></textarea>
                    </div>
                </div>

              </div>
          
            <div class="row">
              <div class="col-12 col-sm-6 col-md-6" *ngFor="let page of servicePages; let i = index">
                <div class="permission">
                    <h2>{{page.name}}</h2>
                    <div class="custom-control custom-checkbox centerIneerItem" *ngFor="let pagePermission of page['permissions']; let j=index" style="margin: 5px 0;">
                      <input type="checkbox" class="custom-control-input roleCheckBox" id="{{pagePermission.id}}" [(ngModel)]="pagePermission.selected" [value]='pagePermission.id' name="{{pagePermission.id}}" style="cursor: pointer;">
                      <label class="custom-control-label disblayBlock-w" for="{{pagePermission.id}}" style="color:#2a2a2a; cursor:pointer; padding: 0 20px">{{pagePermission.permission_name}}</label>
                    </div>
                </div>
              </div>
            </div>
            
            <div class="col-6">
                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveDisabled">حفظ</button>
                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
            </div>

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

  </div>
</div>