我有一个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参数，我需要一些特定的设计：
首先，必须为该问题保留一个区域（类似于form-group）
此问题是以下各项的组合：（以下各项列表） 2.1。 Quesiton ID 2.2。问题第二
我想在这里得到的是，首先必须只有1个组合框用于选择问题，其旁边必须有一个文本字段以输入问题的第二个信息
然后，当用户按下+按钮时，将再次出现一个组合框和文本字段，并且只要用户按下+按钮，此组合框就必须继续。 并且所有这些输入必须填充请求的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>