我创建了一个像这样的表单构建器https://stackblitz.com/edit/angular-dynamic-survey-creation-golkhg?file=src%2Fapp%2Fcreate-survey%2Fcreate-survey.component.html我确实这样做但是我不使用材料设计,这部分不起作用
<div *ngIf="questionCtrl.controls.questionGroup.controls.options">
<ul class="question-type" formArrayName="options">
<li
*ngFor="let optionCtrl of questionCtrl.controls.questionGroup.controls.options.controls let j = index">
<div [formGroupName]="j">
<mat-form-field>
<input formControlName="optionText" matInput placeholder="option text" maxlength="100"
[required]="true">
</mat-form-field>
<button mat-raised-button *ngIf="j>=2" (click)="removeOption(i,j)" color="warn">
X
</button>
</div>
</li>
</ul>
<button mat-raised-button type="button" (click)="addOption(i)" class="mat-sm-button add-option-btn" color="accent"> Add option</button>
</div>
<div
*ngIf="questionCtrl.controls.questionGroup.controls.showRemarksBox">
<mat-slide-toggle formControlName="showRemarksBox">
Show Remarks Textarea
</mat-slide-toggle>
<mat-form-field class="full-width">
<textarea style="resize: none;" disabled matInput placeholder="Textarea"></textarea>
</mat-form-field>
</div>
我的代码是这样的
<div *ngSwitchCase="'Kotak Centang'">
<div *ngIf="questionCtrl.controls.questionGroup.controls.options">
<ul formArrayName="options ">
<li
*ngFor="let optionCtrl of questionCtrl.controls.questionGroup.controls.options let j = index">
<div [formGroupName]="j">
<input formControlName="optionText" matInput
placeholder="option text" maxlength="100"
[required]="true">
<button *ngIf="j>=2" (click)="removeOption(i,j)"
color="warn">X
</button>
</div>
</li>
</ul>
<button nbButton type="button" (click)="addOption(i)"
class="mat-sm-button add-option-btn" color="accent"> Add
option</button>
</div>
</div>