kfmc_website/src/app/trainning-service/add-request/add-request.component.html

<div class="addRequest-w">
  <div class="container">
      <div class="row" style="margin-bottom:8px;">
        <div class="col-12">
          <ul class="list-unstyled titileLi-w">
            <li class="headingText-w" style="cursor: pointer;" (click)="authService.perviousLocation()">خدمه التدريب</li>
            <li class="headingText-w activeLi-w" style="margin-right:5px">إضافه طلب</li>
          </ul>
        </div>
      </div>

    <div class="contentBorder-w">
      <div class="row">

        <div class="col-12">
          <form (ngSubmit)="onSubmitted()" #f="ngForm">
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="form-group">
                <label>نوع الطلب</label>
                <select class="form-control selectStyle-w" name="type" (input)="changeType($event)" [ngModel]="dataForm.type" required>
                  <option value="trainees">المتدربين</option>
                  <option value="fellowship"> زماله(البورد السعودي) </option>
                  <option value="university_administrators">مشرفي الجامعات</option>
                </select>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="form-group">
                <label for="specialize">اسم التخصص</label>
                <input type="text" placeholder="اسم التخصص" class="form-control" name="specialization_name" [ngModel]="dataForm.specialization_name" required/>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="form-group">
                <label for="specialize">التخصص الدقيق</label>
                <input type="text" placeholder="التخصص الدقيق" class="form-control" name="specific_specialization" [ngModel]="dataForm.specific_specialization" required/>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="form-group">
                <label for="specialize">الجامعه</label>
                <input type="text" placeholder="الجامعه" class="form-control" name="university" [ngModel]="dataForm.university" required/>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="form-group">
                <label for="specialize">المستوي</label>
                <input type="text" placeholder="المستوي" class="form-control" name="level" [ngModel]="dataForm.level" required/>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="form-group">
                <label for="specialize">الفتره التدريبيه</label>
                <input type="text" placeholder="الفتره التدريبيه" class="form-control" name="training_period" [ngModel]="dataForm.training_period" required/>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="dataForm.type == 'fellowship'">
              <div class="form-group">
                <label for="specialize">رقم التسجيل</label>
                <input type="number" min="0" placeholder="رقم التسجيل" (keypress)="authService.onKeydown($event)" appNumber class="form-control" name="registration_number" [ngModel]="dataForm.registration_number"/>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="dataForm.type == 'fellowship'">
              <div class="form-group">
                <label for="specialize">رقم البطاقه الهينه</label>
                <input type="number" min="0" (keypress)="authService.onKeydown($event)" appNumber placeholder="رقم البطاقه الهينه" class="form-control" name="authority_card_number" [ngModel]="dataForm.authority_card_number"/>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="dataForm.type == 'fellowship'">
              <div class="form-group">
                <label for="specialize"> البطاقه الوظيفي</label>
                <input type="number" min="0" (keypress)="authService.onKeydown($event)" appNumber placeholder="البطاقه الوظيفي" class="form-control" name="functional_number" [ngModel]="dataForm.functional_number"/>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="dataForm.type == 'fellowship'">
              <div class="form-group">
                <label for="specialize">نوع التعاقد</label>
                <input type="text" placeholder="نوع التعاقد" class="form-control" name="contract_type" [ngModel]="dataForm.contract_type"/>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="dataForm.type == 'fellowship'">
              <div class="form-group">
                <label for="specialize">الجهه التابع لها المتدرب</label>
                <input type="text" placeholder="الجهه التابع لها المتدرب" class="form-control" name="organization_affiliated_with" [ngModel]="dataForm.organization_affiliated_with"/>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-12">
              <h2>أختر الأقسام <span>(قم بإختيار قسم كحد أدني)</span></h2>
              <hr>
              <div class="row">
                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                  <div class="form-group">
                    <label for="department1">القسم الأول</label>
                    <select class="form-control selectStyle-w" id="department1" name="department1" (input)="changeDepartment($event , 1)" [ngModel]="dataForm.department1">
                      <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
                    </select>
                  </div>
                </div>
                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                  <div class="form-group">
                    <label for="department2">القسم الثاني</label>
                    <select class="form-control selectStyle-w" id="department2" name="department2" (input)="changeDepartment($event , 2)" [ngModel]="dataForm.department2">
                      <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
                    </select>
                  </div>
                </div>
                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                  <div class="form-group">
                    <label for="department3">القسم الثالث</label>
                    <select class="form-control selectStyle-w" id="department3" name="department3" (input)="changeDepartment($event , 3)" [ngModel]="dataForm.department3">
                      <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="col-12">
               <div class="row">

                  <div class="col-12">
                  <button type="button" class="btn btn-default" (click)="plusImage()" style="margin:10px 0;">إضافه مرفق</button>
                 </div>
                 <table class="table table-bordered">
                    <thead class="headBackground-w">
                      <tr>
                        <th> إسم المرفق</th>
                        <th>رفع املف ( بصيغه pdf )</th>
                        <th>حذف</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr style="text-align:center;" *ngFor="let file of files; let i = index">
                        <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}"/></td>
                        <td>
                          <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" />
                          <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
                          <span>{{file.nameFile}}</span>
                        </td>
                        <td><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)">حذف</button></td>
                      </tr>
                    </tbody>
                  </table>
               </div>
              </div>
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-success rightW" *ngIf="statusType == 'pending' " [disabled]="!f.valid || checkSaveClick">حفظ</button>
              <button type="button" class="btn btn-warning rightW" (click)="authService.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>