禁用不使用表单在NgFor中工作的
禁用不使用表单在NgFor中工作的
提问于 2022-08-10 11:34:09
在添加了一个新用户之后，前面的用户输入就失去了禁用的功能，同样的情况也发生在*ngFor="let user in users.slice().reverse()" insted of unshift中。
addUser() {
this.users.unshift({
id: 2,
email: 'test1@test.ad',
checkbox: false,
disabled: false,
});
}HTML：
<button mat-mini-fab (click)="addUser()">add</button>
<form #elementForm="ngForm" name="elementForm" class="w-full">
<div *ngFor="let user of users; let i = index">
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Email {{ user.disabled }}</mat-label>
<input matInput type="email" name="email{{ i }}" [(ngModel)]="user.email [disabled]="user.disabled" />
</mat-form-field>
<mat-checkbox [(ngModel)]="user.checkbox" [name]="'checkbox' + i [disabled]="user.disabled">Checkbox {{ user.disabled }}</mat-checkbox>
</div>
</form>一切都很好，没有形式。
示例：https://stackblitz.com/edit/angular-ivy-dqsyk9?file=src/app/app.component.html
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-08-10 11:47:49
对于输入元素，name属性应该是唯一的。创建具有唯一id而不是索引的name属性。
<form #elementForm="ngForm" name="elementForm" class="w-full">
<div *ngFor="let user of users; let i = index">
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Email {{ user.disabled }}</mat-label>
<input
matInput
[disabled]="user.disabled"
type="email"
name="email{{ user.id }}"
[(ngModel)]="user.email"
/>
</mat-form-field>
<mat-checkbox
[disabled]="user.disabled"
[(ngModel)]="user.checkbox"
[name]="'checkbox' + user.id"
>Email {{ user.disabled }}</mat-checkbox
>
</div>
</form>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73305581
复制相关文章
相似问题
腾讯云开发者
