Условно сделать поле ввода только для чтения в Angular 2 или 4: Advice + Best / как это сделать

Я пытался ответить на чей-то вопрос. И при этом я понял, что в некоторых вещах в моем уме была некоторая неуверенность. Я надеюсь, что кто-нибудь сможет дать отзыв по пронумерованным пунктам 1–4:

Задача: Условно сделать поле ввода доступным только для чтения

Соответствующий раздел HTML:

<input type="text" placeholder="Club Name" #clubName>

Добавьте это в компонент Typescript.

// class properties
@ViewChild('clubName')
inp:HTMLInputElement; // Could also use interface Element

// conditionally set in some other methods of class
inp.setAttribute('readonly', 'readonly');
inp.removeAttribute('readonly');

Должен сказать, что для меня это серая зона.

  1. Ссылка на HTMLInputElement или Element напрямую с @ViewChild в Angular 2+ - плохая практика? Только я часто видел примеры с использованием ElementRef или переходом к nativeElement от ElementRef.

Поскольку VS Studio не имеет для этого Intelli-sense, я внезапно чувствую, что кодирую в темноте. то есть вы никогда не получите отзывов о методах setAttribute или removeAttribute, их требованиях к параметрам и т. д. (я тоже знаю As to cast)

  1. Затем, посмотрев документацию, я подозреваю, что вы можете сделать это прямо на вводе в шаблоне HTML:
<input [attr.readonly]= "isReadOnly">

IIRC Я думаю, вам нужно сделать это с помощью свойства get в Typescript:

get isReadOnly() :boolean {
}

Этот способ действителен?

  1. Мне интересно, можете ли вы сделать синтаксис метода в шаблоне HTML:
<input [attr.readonly]= "isReadOnly()">

Машинопись

isReadOnly() :boolean {
}

Этот способ действителен?

4. Подводя итог, каков наилучший подход?

Обновление: существует также * ngIF, поэтому вы выводите один из двух входных элементов с тем же именем. Но для меня это звучит как кувалда, чтобы расколоть орех.


angular readonly attr html-input
person JGFMK    schedule 20.07.2017    source источник
comment
Определите действительный .... Потому что, если вы спрашиваете, работает ли он, протестируйте его и выясните. Это очень широкий вопрос ... Я использую 2 & 3 в отдельных случаях, в зависимости от того, что мне нужно вычислить для определения bool.   -  person Zze    schedule 21.07.2017

Ответы (4)


arrow_upward
105
arrow_downward

Вам нужно использовать следующее (Angular 4):

<input [readonly]="isReadOnly">

Если вы используете att.readonly, то ввод всегда будет доступен только для чтения, потому что атрибут readonly будет присутствовать, даже если его значение ложно. При использовании [readonly] Angular атрибут будет размещаться только в том случае, если isReadOnly истинно.

В HTML для того, чтобы ввод был доступен только для чтения, достаточно следующего:

<input readonly>
person phn    schedule 06.11.2017

arrow_upward
4
arrow_downward

Ни один из них не работал у меня .. Наконец-то нашел решение, создав собственную директиву angular. Директивы - мощная функция angular

  1. Создать настраиваемую директиву

@Directive({
  selector: '[readonly],[readOnly]',
  host: {
    '[attr.readonly]': '_isReadonly ? "" : null'
  }
})
class ReadonlyDirective {
  _isReadonly = false;

  @Input() set readonly (v) {
     this._isReadonly = coerceBooleanProperty(v);
  };

  ngOnChanges(changes) {
    console.log(changes);
  }
}

  1. Добавить в объявления модуля

@NgModule({
  ...
  declarations: [ ..., ReadonlyDirective ],
  ...
})
3. Now its time to use directive as following.

<input [(ngModel)]="name" [readonly]="isReadonly" />
or
<input [(ngModel)]="name" readonly />
Directives are powerful feature of angular, I strongly recommend you to go through https://angular.io/guide/attribute-directives

Демо https://stackblitz.com/edit/angular-readonly-input-aifncy?file=src/app/app.component.ts

person BEJGAM SHIVA PRASAD    schedule 11.12.2019

arrow_upward
3
arrow_downward

Все зависит от того, чего вы хотите добиться. На первый взгляд, я бы сказал, что pct. 2 - самый простой способ сделать это:

<input [attr.readonly]= "isReadOnly">

Затем в своем компоненте вы объявляете переменную:

isReadOnly: boolean;

После этого вы присваиваете желаемое значение:

// when you want to be read-only
isReadOnly = true;
// whe you want to be editable
isReadOnly = false;
person BogdanC    schedule 20.07.2017
comment
Если вы используете att.readonly, то вход всегда будет доступен только для чтения, потому что атрибут readonly будет присутствовать, даже если его значение ложно. При использовании [readonly] Angular атрибут будет размещен только в том случае, если isReadOnly истинно. Это неверный ответ. Прочтите принятый ответ. - person Tushar Khanna; 28.07.2020

arrow_upward
1
arrow_downward

Вы можете использовать <input readonly="{{ variable }}>".

В своем * .component.ts инициализируйте переменную:

private variable: boolean = true;
person Rodrigo Pauletti    schedule 05.10.2018
comment
Это добавляет атрибут readonly ко входным данным независимо от значения variable. - person lortimer; 10.06.2020