我对自己的表格有点疑惑.
我做了一个自定义元素:
<div formControlName="surveyType">
<div *ngFor="let type of surveyTypes"
(click)="onSelectType(type)"
[class.selected]="type === selectedType">
<md-icon>{{ type.icon }}</md-icon>
<span>{{ type.description }}</span>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我尝试添加formControlName但有角度不想知道任何事情,只是说:
<div formControlName="surveyType">
<div *ngFor="let type of surveyTypes"
(click)="onSelectType(type)"
[class.selected]="type === selectedType">
<md-icon>{{ type.icon }}</md-icon>
<span>{{ type.description }}</span>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我试图添加ngDefaultControl但没有成功.这似乎是因为没有输入/选择...但我不知道该怎么做.
我想将我的点击绑定到这个formControl,以便当有人点击整个卡片时将我的'type'推入formControl.可能吗?
在 angular 拖放模块中,他们提供了 moveItemInArray() 函数的文档,通过使用它我们只能拖动数组中的内容。但是,我们如何在 formArray 中混洗 (formGroups/formControls) 呢?
甚至我也尝试过这个 moveItemInFormArray() 函数,正如这里提到的https://github.com/angular/angular/issues/27171。但我不能让它工作。
groupDrag.component.html
<form [formGroup]="exampleForm">
<div formArrayName="formUnits" cdkDropList (cdkDropListDropped)="drop($event)" *ngFor="let unit of exampleForm.controls.formUnits.controls; let i=index" class="rowGroup">
<div [formGroupName]="i" class="basic-container" cdkDrag>
<div class="row row-container" >
<button type="button" class="drag-handle" mat-icon-button cdkDragHandle>
<mat-icon>unfold_more</mat-icon>
</button>
<!-- label input field -->
<mat-form-field class="col-lg-4">
<input matInput placeholder="Please enter label without spaces" formControlName="label" required>
</mat-form-field>
<!-- options input field -->
<mat-form-field class="col-lg-3">
<input matInput placeholder="Enter Placeholdertext" formControlName="placeholder">
</mat-form-field>
</div>
</div>
</div>
</form>
Run Code Online (Sandbox Code Playgroud)
groupDrag.component.ts
drop(event: CdkDragDrop<FormGroup[]>) …Run Code Online (Sandbox Code Playgroud)