kfmc_website/src/app/dashboard/internal-services/add-internal-services/add-internal-services.component.html

<div class="addHospital-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>
        <hr class="hr">
      </div>
    </div>
    
    <div class="row" style="margin-top: 30px;">
      <div class="col-12">
        <form (ngSubmit)="onSubmitted()" [formGroup]="addInternalForm">

          <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" placeholder="الأسم باللغه العربيه" formControlName="name"/>
                </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>
                      <input type="text" class="form-control" placeholder="الأسم باللغه الانجليزيه" formControlName="name_en"/>
                  </div>
              </div>
            
              <div class="col-12 col-sm-12 col-md-4">
                <div class="form-group">
                  <label for="satus_ex" style="float:right">الحاله  <span class="spanReqired-w">*</span></label>
                  <select class="form-control" formControlName="status">
                    <option value="0">غير فعال</option>
                    <option value="1">فعال</option>
                  </select>
                </div>
              </div>
    
              <div class="col-12 col-sm-12 col-md-4">
                <div class="form-group">
                    <button class="btn btn-secondary form-control" style="margin-top:30px" type="button" (click)="onAddTitle(i)">أضف المزيد من الوصف</button>
                </div>
              </div>
          </div>

          <hr>
        <div class="descriptionContainer">
          <div class="row">
            <div class="col-12 col-md-6"  formArrayName="fields" *ngFor="let titleControl of addInternalForm.get('fields').controls; let i = index">
              <div class="form-group  arrayGroupForm-w" [formGroupName]="i">
                <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[i]" class="imgProfile" height="200">
                      <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" (change)="getUrl($event,i)" formControlName="photo"/>
                      <label for="file{{i}}" class="iconUpload-w"  *ngIf="showOpenFile[i]"><i class="fas fa-upload"></i></label>
                      <label class="iconUpload-w" *ngIf="showCloseFile[i]" (click)="closePhoto(i)"><i class="fas fa-times"></i></label>
                  </div>
                </div>
                <label for="name" style="float: right;">الأسم باللغه العربيه</label>
                <input type="text" id="name" class="form-control" formControlName="name" style="margin: 10px 0;" />
                <label for="name_en" style="float: right;">الأسم باللغه الإنجليزيه</label>
                <input type="text" id="name_en" class="form-control" formControlName="name_en" style="margin: 10px 0;" />
                <label for="link" style="float: right;">الرابط</label>
                <input type="text" id="link" class="form-control" formControlName="link" style="margin:10px 0" />
                
                <label for="apperance" style="float: right;">الظهور</label>
                <select id="apperance" class="form-control" formControlName="apperance" style="margin: 10px 0">
                    <option value="1">الظهور</option>
                    <option value="0">غير الظهور</option>
                </select>
                <label for="status" style="float: right;">الحاله</label>
                <select id="status" class="form-control" formControlName="status" style="margin: 10px 0">
                    <option value="1">فعال</option>
                    <option value="0">غير فعال</option>
                </select>
                <button type="button" class="btn btn-danger rightW" (click)="removeTitle(i)">حذف</button>
              </div>
            </div>
          </div>  
        </div>

        <button type="submit" class="btn btn-success rightW" [disabled]="!addInternalForm.valid">حفظ</button>
        
      </form>
      </div>
    </div>
  </div>
</div>