将动态输入添加到同一组

时间:2019-01-05 09:31:17

标签: angular angular4-forms

我有一个4号角的管理面板脚本,如下所示,它的主要目的是满足下面的休息服务请求。

{
"id" : 22,
"videoUrl":"KucukTirtil-2018-08-01-112453467.mp4",
"videoImage":"http://lh3.googleusercontent.com/dFZivWNjBF7rkr1si7MjLwJ-2-FOFyrthiGhIhDwZNHw31RLIAEbefajV6KfFC60p7K0lUnbjncz4V_913_68Wp7",
"description":"3-6 ay aralığında bebeğinizin fiziksel gelişim alanında aşağıdaki becerileri gerçekleştirebilmesini bekleriz:",
"period":4,
"language":1,
"relatedArea":2,
"relatedQuestions" : [
        {
            "questionId" : 100,
            "questionPopupSecond" : 10
        },
        {
            "questionId" : 141,
            "questionPopupSecond" : 20
        },
        {
            "questionId" : 278,
            "questionPopupSecond" : 25
        },
        {
            "questionId" : 279,
            "questionPopupSecond" : 45
        }
    ]
}

此屏幕中填充了除relatedQuestions参数以外的所有参数,但是对于relatedQuestions参数,我需要一些特定的设计:

  1. 首先,必须为该问题保留一个区域(类似于form-group)

  2. 此问题是以下各项的组合:(以下各项列表) 2.1。 Quesiton ID 2.2。问题第二

  3. 我想在这里得到的是,首先必须只有1个组合框用于选择问题,其旁边必须有一个文本字段以输入问题的第二个信息

  4. 然后,当用户按下+按钮时,将再次出现一个组合框和文本字段,并且只要用户按下+按钮,此组合框就必须继续。 并且所有这些输入必须填充请求的relatedQuestions数组

在Angular上有没有简单的组件可以实现这一目标

这是我的角度脚本:

<div class="card">
  <div class="card-header">
    Video Details
  </div>
  <div class="card-body">
    <form #editForm="ngForm" (ngSubmit)="editForm.form.valid && editVideo()">
      <div class="form-group row">
        <label for="videoId" class="col-sm-2 col-form-label">Video ID</label>
        <div class="col-sm-10">
          <input type="text" class="form-control disableField" [(ngModel)]="editVideoData.videoId" name="videoId" placeholder="Enter video id" #videoId="ngModel" disabled required/>
        </div>
      </div>
      <div class="form-group row">
        <label for="previewImage" class="col-sm-2 col-form-label">Video Preview Image</label>
        <div class="col-sm-10">
          <input type="text" class="form-control mb-3 disableField" [(ngModel)]="editVideoData.videoImage" name="videoImage" placeholder="Video preview image name" #previewImageName="ngModel" disabled required/>
          <p class="errorMsg" *ngIf="videoImage?.errors?.required && editForm.submitted">Video preview image required</p>
        </div>
      </div>
      <div class="form-group row">
        <label for="editPreviewImage" class="col-sm-2 col-form-label">Edit preview image</label>
        <div class="col-sm-10">
          <input type="file" class="form-control mb-3" accept="image/*" (change)="fileChangeListener($event)" />
          <img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper>
          <button type="button" class="btn btn-success btn-lg uploadbtn" (click)="uploadCropedImage()" *ngIf="data.image">Upload</button>
          <span *ngIf="loadingPreviewImage" class="loaderPosition"><img src="assets/images/UploadPreloader.gif"></span>
        </div>
      </div>
      <div class="form-group row">
        <label for="videoFile" class="col-sm-2 col-form-label">Video File</label>
        <div class="col-sm-10">
          <input type="text" class="form-control mb-3 disableField" [(ngModel)]="editVideoData.videoUrl" name="videoUrl" placeholder="Video file name" #videoFileName="ngModel" disabled required/>
          <p class="errorMsg" *ngIf="videoUrl?.errors?.required && editForm.submitted">Video file required</p>
        </div>
      </div>
      <div class="form-group row">
        <label for="editVideoFile" class="col-sm-2 col-form-label">Edit video file</label>
        <div class="col-sm-10">
          <input type="file" class="form-control" accept="video/mp4,video/x-m4v" (change)="uploadFile('0', $event)" />
          <span *ngIf="loadingVideo"><img src="assets/images/UploadPreloader.gif"></span>
        </div>
      </div>
      <div class="form-group row">
        <label for="description" class="col-sm-2 col-form-label">Video Description</label>
        <div class="col-sm-10">
          <textarea class="form-control" rows="7" [(ngModel)]="editVideoData.description" name="description" placeholder="Enter description" #transcript="ngModel" required></textarea>
          <p class="errorMsg" *ngIf="description?.errors?.required && (description?.touched || editForm.submitted)">Transcript required</p>
        </div>
      </div>
      <div class="form-group row">
        <label for="relatedPeriod" class="col-sm-2 col-form-label">Related Period</label>
        <div class="col-sm-3">
          <select class="form-control" [(ngModel)]="editVideoData.period" name="period" #relatedAge="ngModel" (change)="subAgesOption('1')" required>
            <option *ngFor="let period of periodCommonComponent.periods" [value]="period.id">
              <span *ngIf="period.endMonth <= 36">{{period.startMonth}} - {{period.endMonth}} months</span>
              <span *ngIf="period.startMonth >= 36">{{period.startMonth / 12}} years - ({{period.startMonth}} - {{period.endMonth}} months)</span>
            </option>
          </select>
          <p class="errorMsg" *ngIf="period?.errors?.required && (period?.touched || editForm.submitted)">Select related period</p>
        </div>
      </div>
      <div class="form-group row">
        <label for="relatedArea" class="col-sm-2 col-form-label">Related Area</label>
        <div class="col-sm-10">
          <select class="form-control" [(ngModel)]="editVideoData.relatedArea" name="relatedArea" #relatedArea="ngModel" required>
            <option *ngFor="let area of periodCommonComponent.developmentAreas" [value]="area.areaId">{{area.areaName}}</option>
          </select>
          <p class="errorMsg" *ngIf="relatedArea?.errors?.required && (relatedArea?.touched || editForm.submitted)">Select related development area</p>
        </div>
      </div>
      <div class="form-group row">
        <label for="relatedQuestions" class="col-sm-2 col-form-label">Related Assesment Questions</label>
        <div class="col-sm-10">
          <ss-multiselect-dropdown *ngIf="periodCommonComponent.getAssesmentList.length > 0" [options]="periodCommonComponent.getAssesmentList" [texts]="multiselectTexts" [settings]="multiselectSettings" [(ngModel)]="editVideoData.relatedQuestions" name="relatedQuestions"></ss-multiselect-dropdown>
        </div>
      </div>
      <div class="form-group row">
        <label for="language" class="col-sm-2 col-form-label">Language</label>
        <div class="col-sm-10">
          <select class="form-control" [(ngModel)]="editVideoData.language" name="language" #language="ngModel" required>
            <option *ngFor="let language of activitiesCommonComponent.languages" [value]="language.languageId">{{language.languageName}}</option>
          </select>
          <p class="errorMsg" *ngIf="language?.errors?.required && (language?.touched || editForm.submitted)">Select language</p>
        </div>
      </div>
      <div class="form-group row">
        <div class="offset-sm-2 col-sm-10">
          <button type="submit" class="btn btn-primary">Edit</button>
        </div>
      </div>
    </form>
  </div>
</div>

0 个答案:

没有答案