Угловой условный режим только для чтения/отключения в полях ввода

У меня есть таблица с полями ввода, которые я заполняю значениями модели, я хочу применить только чтение/отключение к этим заполненным полям. когда я нажимаю добавить строку, я добавляю пустые строки в таблицу. Пустые строки, добавленные в таблицу, должны быть редактируемыми. Я не могу найти логику, которая применяет readOnly/disable только к уже заполненным ячейкам таблицы.

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;
}

Демо


typescript javascript angular html angular-forms
person User123    schedule 09.10.2018    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Вы можете объявить переменную, которая идентифицирует размер массива, поступающего из бэкэнда (например, 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>
person Marcello Caon    schedule 10.10.2018

arrow_upward
0
arrow_downward

Новая пустая строка имеет индекс $index === userList - 1, так как это последний элемент этой коллекции. Вы можете использовать это условие и применить любой атрибут, который вы хотите.

person DrNio    schedule 09.10.2018
comment
Я считаю, что если я добавлю в таблицу две или более пустых строк, это условие не сработает. - person User123; 09.10.2018

arrow_upward
0
arrow_downward 

<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]="список пользователей[$index].только для чтения"

person Vivek Kumar    schedule 09.10.2018
comment
Я могу сделать ввод нередактируемым. мой вопрос заключается в том, как сделать несколько входов редактируемыми, когда они находятся в цикле. - person User123; 09.10.2018
comment
Я ищу подход к пользовательскому интерфейсу. Я получаю объект jsonUser из бэкэнда, я не могу внести изменения в API - person User123; 10.10.2018
comment
по умолчанию в начале вы можете инициализировать свой элемент jsonUser true, а позже вы продолжаете обновлять свойство только для чтения по своему усмотрению - person Vivek Kumar; 10.10.2018
comment
после получения ответа измените его userJson.forEach(item => item.readonly = false); и продолжайте обновлять userJson в зависимости от бизнес-логики - person Vivek Kumar; 10.10.2018
comment
В этом случае при добавлении новой строки item.readonly будет применяться как false к новой строке, поскольку она находится в *ngFor. - person User123; 10.10.2018
comment
Когда вы добавляете новую запись в userJson во время создания, измените это свойство на true - person Vivek Kumar; 10.10.2018
comment
не меняет ли он и предыдущие строки. Не могли бы вы разветвить блиц-код стека и обновить его соответствующим образом? - person User123; 10.10.2018

arrow_upward
0
arrow_downward

Внимательно просмотрите следующий код:

    <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>

и в массиве в каждом индексе должно быть логическое значение с именем только для чтения, и когда оно истинно, поле ввода будет отключено (недоступно для редактирования), иначе оно будет включено,

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 будут отключены

person Touqeer Aslam    schedule 09.10.2018
comment
Как я уже упоминал, я не хочу никаких изменений в массиве. Я получаю JSON от бэкенда, я не могу изменить API. Я ищу подход к пользовательскому интерфейсу - person User123; 10.10.2018
comment
знаете ли вы тогда, какой индекс будет отключен, как вы собираетесь проверить, какой ввод должен быть отключен, а какой включен? - person Touqeer Aslam; 11.10.2018
comment
Пожалуйста, проверьте принятый ответ. Вот так я решил свою проблему. - person User123; 11.10.2018