Angular 有条件 readonly/disable 输入字段
Angular conditional readonly/disable on input fields
我有一个带有输入字段的 table,我正在用模型值填充它,我想将 readonly/disable 应用到这些填充的字段。当我点击添加行时,我将空行添加到 table。添加到 table 的空行必须是 editable。我找不到仅适用于 readOnly/disable 已填充 table 单元格的逻辑。
HTML
<table>
<thead>
<th> Name </th>
<th> Age </th>
<th> Url </th>
<th> Gender </th>
<th> Image </th>
<th> Keywords </th>
</thead>
<tbody>
<tr *ngFor="let data of userList; let $index = index">
<td> <input class="form-control" type="text" id="userListName"[(ngModel)]="userList[$index].name"
name="userListName{{$index}}" [readonly]="userList[$index].name.length"/></td>
<td> <input class="form-control" type="text" id="userListAge" [(ngModel)]="userList[$index].age"
name="userListAge{{$index}}" readonly/></td>
<td><input class="form-control" type="text" id="userListUrl" [(ngModel)]="userList[$index].url" name="userListUrl{{$index}}" readonly/></td>
<td> <input class="form-control" type="text" id="userListGender" [(ngModel)]="userList[$index].gender"
name="userListGender{{$index}}" readonly/></td>
<td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
name="userListImage{{$index}}" readonly/>
</td>
<td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
name="userListKeywords{{$index}}" readonly/></td>
</tr>
</tbody>
<button (click) ="addRow()"> Add Row </button>
</table>
组件:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
userList: userModel[] = [];
jsonUser = [
{
name: 'abc',
age: 17,
url: "a.com",
gender: "F",
image: "i-ocion.png",
keywords: "blah"
},
{
name: 'cde',
age: 18,
url: "cde.com",
gender: "F",
image: "i-oddcion.png",
keywords: "blahhh"
},
{
name: 'efg',
age: 19,
url: "efg.com",
gender: "F",
image: "i-ocfffion.png",
keywords: "blahhhhhhh"
}
]
ngOnInit() {
this.userList = this.jsonUser;
}
addRow() {
this.userList.push(new userModel);
}
}
export class userModel {
name: string;
age: number;
url: any;
gender: string;
image: string;
keywords: string;
}
新空行的索引为 $index === userList - 1
,因为它是该集合的最后一项。您可以使用该条件并应用您想要的任何属性。
<td>
<input
class="form-control"
type="text"
id="userListKeywords"
[(ngModel)]="userList[$index].keywords"
name="userListKeywords{{$index}}"
[attr.disabled]="true" readonly/>
</td>
[attr.disabled]="true" 将使输入不可编辑,您可以修改代码使此属性可配置。
在 jsonUser
对象中添加一个 属性
jsonUser = [
{
name: 'abc',
age: 17,
url: "a.com",
gender: "F",
image: "i-ocion.png",
keywords: "blah",
readonly: true
},
]
然后
<td>
<input
class="form-control"
type="text"
id="userListKeywords"
[(ngModel)]="userList[$index].keywords"
name="userListKeywords{{$index}}"
[attr.disabled]="userList[$index].readonly" readonly/>
</td>
[attr.disabled]="userList[$index].readonly"
仔细看下面代码:
<td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
name="userListImage{{$index}}" [disabled]="data.readonly"/>
</td>
<td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
name="userListKeywords{{$index}}" [disabled]="data.readonly"/></td>
</tr>
</tbody>
并且在每个索引的数组中必须有一个名为 readonly 的布尔值,当它为真时,输入字段将被禁用(不可编辑),否则它将被启用,
jsonUser = [
{
name: 'abc',
age: 17,
url: "a.com",
gender: "F",
image: "i-ocion.png",
keywords: "blah",
readonly:true
},
{
name: 'cde',
age: 18,
url: "cde.com",
gender: "F",
image: "i-oddcion.png",
keywords: "blahhh",
readonly:false
},
{
name: 'efg',
age: 19,
url: "efg.com",
gender: "F",
image: "i-ocfffion.png",
keywords: "blahhhhhhh",
readonly:true
}
]
索引 1 和 3 将被禁用
您可以声明一个变量来标识来自后端的数组大小(如 initialArraySize),然后在添加新行时验证该行的索引是否大于初始数组大小,如果是的,你让它可以编辑了..
<tbody>
<tr *ngFor="let data of userList; let index = index">
<td> <input class="form-control" type="text" id="userListName" [(ngModel)]="userList[index].name"
name="userListName{{index}}" [readonly]="index >== initialArraySize"/></td>
</tr>
</tbody>
我有一个带有输入字段的 table,我正在用模型值填充它,我想将 readonly/disable 应用到这些填充的字段。当我点击添加行时,我将空行添加到 table。添加到 table 的空行必须是 editable。我找不到仅适用于 readOnly/disable 已填充 table 单元格的逻辑。
HTML
<table>
<thead>
<th> Name </th>
<th> Age </th>
<th> Url </th>
<th> Gender </th>
<th> Image </th>
<th> Keywords </th>
</thead>
<tbody>
<tr *ngFor="let data of userList; let $index = index">
<td> <input class="form-control" type="text" id="userListName"[(ngModel)]="userList[$index].name"
name="userListName{{$index}}" [readonly]="userList[$index].name.length"/></td>
<td> <input class="form-control" type="text" id="userListAge" [(ngModel)]="userList[$index].age"
name="userListAge{{$index}}" readonly/></td>
<td><input class="form-control" type="text" id="userListUrl" [(ngModel)]="userList[$index].url" name="userListUrl{{$index}}" readonly/></td>
<td> <input class="form-control" type="text" id="userListGender" [(ngModel)]="userList[$index].gender"
name="userListGender{{$index}}" readonly/></td>
<td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
name="userListImage{{$index}}" readonly/>
</td>
<td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
name="userListKeywords{{$index}}" readonly/></td>
</tr>
</tbody>
<button (click) ="addRow()"> Add Row </button>
</table>
组件:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
userList: userModel[] = [];
jsonUser = [
{
name: 'abc',
age: 17,
url: "a.com",
gender: "F",
image: "i-ocion.png",
keywords: "blah"
},
{
name: 'cde',
age: 18,
url: "cde.com",
gender: "F",
image: "i-oddcion.png",
keywords: "blahhh"
},
{
name: 'efg',
age: 19,
url: "efg.com",
gender: "F",
image: "i-ocfffion.png",
keywords: "blahhhhhhh"
}
]
ngOnInit() {
this.userList = this.jsonUser;
}
addRow() {
this.userList.push(new userModel);
}
}
export class userModel {
name: string;
age: number;
url: any;
gender: string;
image: string;
keywords: string;
}
新空行的索引为 $index === userList - 1
,因为它是该集合的最后一项。您可以使用该条件并应用您想要的任何属性。
<td>
<input
class="form-control"
type="text"
id="userListKeywords"
[(ngModel)]="userList[$index].keywords"
name="userListKeywords{{$index}}"
[attr.disabled]="true" readonly/>
</td>
[attr.disabled]="true" 将使输入不可编辑,您可以修改代码使此属性可配置。
在 jsonUser
对象中添加一个 属性
jsonUser = [
{
name: 'abc',
age: 17,
url: "a.com",
gender: "F",
image: "i-ocion.png",
keywords: "blah",
readonly: true
},
]
然后
<td>
<input
class="form-control"
type="text"
id="userListKeywords"
[(ngModel)]="userList[$index].keywords"
name="userListKeywords{{$index}}"
[attr.disabled]="userList[$index].readonly" readonly/>
</td>
[attr.disabled]="userList[$index].readonly"
仔细看下面代码:
<td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
name="userListImage{{$index}}" [disabled]="data.readonly"/>
</td>
<td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
name="userListKeywords{{$index}}" [disabled]="data.readonly"/></td>
</tr>
</tbody>
并且在每个索引的数组中必须有一个名为 readonly 的布尔值,当它为真时,输入字段将被禁用(不可编辑),否则它将被启用,
jsonUser = [
{
name: 'abc',
age: 17,
url: "a.com",
gender: "F",
image: "i-ocion.png",
keywords: "blah",
readonly:true
},
{
name: 'cde',
age: 18,
url: "cde.com",
gender: "F",
image: "i-oddcion.png",
keywords: "blahhh",
readonly:false
},
{
name: 'efg',
age: 19,
url: "efg.com",
gender: "F",
image: "i-ocfffion.png",
keywords: "blahhhhhhh",
readonly:true
}
]
索引 1 和 3 将被禁用
您可以声明一个变量来标识来自后端的数组大小(如 initialArraySize),然后在添加新行时验证该行的索引是否大于初始数组大小,如果是的,你让它可以编辑了..
<tbody>
<tr *ngFor="let data of userList; let index = index">
<td> <input class="form-control" type="text" id="userListName" [(ngModel)]="userList[index].name"
name="userListName{{index}}" [readonly]="index >== initialArraySize"/></td>
</tr>
</tbody>