[英]Angular material creating a form inside mat-table
我需要在垫子表内创建一个表单(垫子表在垫子对话框内的步进器内)。 截至目前,我创建了一个表格,并在 td 标签内使用了带有 mat-input 的 mat-form 字段,但我的输入似乎被禁用,因为我无法使用它。
保存表格的步骤的 html 代码:
<mat-step [stepControl]="contactsFormGroup">
<ng-template matStepLabel>Contacts</ng-template>
<div
fxLayout="column"
fxLayoutAlign="center Center"
fxLayoutGap="20px"
class="form-wrapper-add-contacts"
[formGroup]="contactsFormGroup"
>
<div class="add-contacts-table-wrapper">
<table
mat-table
[dataSource]="contactsFormGroup.get('contactsArray').value"
formArrayName="contactsArray"
>
<ng-container matColumnDef="indexPos">
<th mat-header-cell *matHeaderCellDef>No.</th>
<td mat-cell *matCellDef="let element; let i = index">
{{ i + 1 + "." }}
</td>
</ng-container>
<ng-container matColumnDef="firstName">
<th mat-header-cell *matHeaderCellDef>First Name</th>
<td
mat-cell
*matCellDef="let element; let i = index"
formGroupName="{{ i }}"
>
<mat-form-field appearance="fill">
<mat-label>First Name</mat-label>
<input
matInput
placeholder="First Name"
autocorrect="off"
autocapitalize="off"
spellcheck="off"
type="text"
formControlName="contactFirstName"
required
/>
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="lastName">
<th mat-header-cell *matHeaderCellDef>Last Name</th>
<td
mat-cell
*matCellDef="let element; let i = index"
formGroupName="{{ i }}"
>
<mat-form-field appearance="fill">
<mat-label>Last Name</mat-label>
<input
matInput
placeholder="Last Name"
autocorrect="off"
autocapitalize="off"
spellcheck="off"
type="text"
formControlName="contactLastName"
required
/>
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef>Email</th>
<td
mat-cell
*matCellDef="let element; let i = index"
formGroupName="{{ i }}"
>
<mat-form-field appearance="fill">
<mat-label>Email</mat-label>
<input
matInput
placeholder="Email"
autocorrect="off"
autocapitalize="off"
spellcheck="off"
type="text"
formControlName="contactEmail"
required
/>
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="phone">
<th mat-header-cell *matHeaderCellDef>Phone</th>
<td
mat-cell
*matCellDef="let element; let i = index"
formGroupName="{{ i }}"
>
<mat-form-field appearance="fill">
<mat-label>Phone</mat-label>
<input
matInput
placeholder="Phone"
autocorrect="off"
autocapitalize="off"
spellcheck="off"
type="text"
formControlName="contactPhone"
required
/>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
<div class="previous-button-wrapper">
<button mat-button matStepperPrevious type="button">
Back
</button>
</div>
</div>
</mat-step>
表单组的 ts 代码:
contactsFormGroup: FormGroup = this.fb.group({
contactsArray: this.fb.array([this.fb.group({
contactFirstName: ['', [Validators.required, Validators.maxLength(200)]],
contactLastName: ['', [Validators.required, Validators.maxLength(200)]],
contactEmail: ['', [Validators.required, Validators.email, Validators.maxLength(200)]],
contactPhone: ['', [Validators.required, Validators.maxLength(15)]]
}, { updateOn: 'blur' })])
}, { updateOn: 'blur' });
截至目前的表格图片:表格 - 表格
让它工作,改变了这个:
[dataSource]="contactsFormGroup.get('contactsArray').value
至:
[dataSource]=contactsFormGroup.get('contactsArray').controls
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.