kfmc_website/src/app/dashboard/main-menu/add-menu/add-menu.component.html

<div class="addHospital-w">
    <div class="container">
      
      <div class="row" style="margin-bottom: 30px;">
          <div class="col-12">
            <ul class="list-unstyled titileLi-w">
              <li class="headingText-w">{{servicesName}} </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">
              <div class="col-12">
        
                <form (ngSubmit)="onSubmitted()" #f="ngForm">
      
                  <div class="row">
                    
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
                      <div class="form-group text-center imgContainer">
                          <img [src]="urlImg" class="imgProfile" height="200"> 
                          <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
                          <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
                      </div>
                    </div>
                    
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <div class="form-group">
                        <label for="name" style="float: right; margin-right: 5px"> الأسم باللغه العربيه <span class="spanReqired-w">*</span></label>
                          <input type="text" class="form-control" placeholder="الأسم باللغه العربيه" id="name" name="name" ngModel [ngModel]="menu.name" #name="ngModel" required/>
                      </div>
                    </div>
                    
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <div class="form-group">
                        <label for="name_en" style="float: right; margin-right: 5px">الأسم باللغه الأنجليزيه <span class="spanReqired-w">*</span></label>
                          <input type="text" class="form-control" id="name_en" placeholder="الأسم باللغه الأنجليزيه" name="name_en" ngModel [ngModel]="menu.name_en" #name="ngModel" required/>
                      </div>
                    </div>
                    
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <div class="form-group">
                        <label for="ranking" style="float: right; margin-right: 5px">الترتيب <span class="spanReqired-w">*</span></label>
                        <select class="form-control" name="ranking" [ngModel]="menu.ranking" id="ranking" required>  
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                          <option value="6">6</option>
                          <option value="1000">المزيد</option>
                        </select>
                      </div>
                    </div>
          
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
                      <select class="form-control" name="status" [ngModel]="menu.status" id="status" required>  
                        <option value="1">فعال</option>
                        <option value="0">غير فعال</option>
                      </select>
                    </div>
                    
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <label for="parent" style="float:right; margin-right:5px;">الأب</label>
                      <select class="form-control" name="parent_id" [ngModel]="menu.parent_id" id="parent">
                        <option value="">لايوجد</option>
                        <option *ngFor="let parent of parentList" [value]="parent.id">{{parent.name}}</option>
                      </select>
                    </div>

                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <label for="link_type" style="float: right; margin-right: 5px"> نوع الرابط <span class="spanReqired-w">*</span></label>
                      <select class="form-control" name="link_type" (input)="linkTypeValue($event)" [ngModel]="menu.link_type" required>
                        <option value="internal">داخلي</option>
                        <option value="external">خارجي</option>
                      </select>
                    </div>
                    
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="margin: 10px 0;" *ngIf="menu.link_type == 'external'">
                      <div class="form-group">
                        <label for="link2" style="float: right; margin-right: 5px">الرابط <span class="spanReqired-w">*</span></label>
                          <input type="text" class="form-control" placeholder="الرابط" id="link" name="link2" ngModel [ngModel]="menu.link2" #link="ngModel" required/>
                      </div>
                    </div>

                    <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="margin: 10px 0;" *ngIf="menu.link_type == 'internal'">
                      <label for="link" style="float: right; margin-right: 5px">الصفحات الخارجيه <span class="spanReqired-w">*</span> </label>
                      <select class="form-control" name="link" [ngModel]="menu.link" required>
                        <option *ngFor="let page of internalPages" [value]="page.id">{{page.name}}</option>
                      </select>
                    </div>

                    <div class="col-12">
                        <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
                        <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
                    </div>
      
                  </div>
                  
        
                </form>
        
              </div>
            </div>
      </div>
    </div>
  </div>