Как сделать formControl readonly

Ответ 1

Если вы используете Reactive Forms, вы можете назначить его динамически, как в приведенном ниже примере кода (поле электронной почты)

this.registerForm = this.formBuilder.group({
      first_name: ['', Validators.required],
      last_name: ['', Validators.required],
      email: new FormControl({value: null, disabled: true}, Validators.required),
      password: ['', Validators.compose([Validators.required, Validators.email])],
      confirm_password: ['', Validators.required],
});

Если вы хотите получить все значения, включая отключенные элементы управления, вы должны использовать:

this.registerForm.getRawValue();

Просмотреть комментарий метода к исходному коду

/**
   * The aggregate value of the 'FormGroup', including any disabled controls.
   *
   * If you'd like to include all values regardless of disabled status, use this method.
   * Otherwise, the 'value' property is the best way to get the value of the group.
   */
  getRawValue(): any;

Наслаждайтесь кодированием!

Ответ 2

Мы можем использовать любой атрибут html и связывать его в угловом режиме с помощью [].

Таким образом, вы можете использовать привязку атрибутов для атрибута readonly в этом элементе управления

например

<input type="text" formControlName="xyz" [readonly]="anyBooleanPropertyFromComponent"/>

Ответ 3

На мой взгляд, нет смысла READONLY в реактивной форме (Angular 2+).

В обычном HTML, CSS-проекте

Мы используем атрибут READONLY, чтобы запретить пользователю вводить/выбирать элемент управления формы, но мы получаем значение из ввода.

Мы используем атрибут DISABLED, чтобы запретить пользователю вводить/выбирать элемент управления формы, и мы не получаем значения из входных данных.

В угловых 2+ CLI проектах

Нам не нужен атрибут READONLY, чтобы запретить пользователю вводить/выбирать. Поскольку атрибута DISABLED достаточно, чтобы запретить пользователю вводить/выбирать, а также вы можете получить значение из отключенного поля ввода/выбора/флажка/радио.

Вы можете добавить отключенный атрибут в поле в зависимости от модели

При создании FormGroup

this.formGroupName = this.fb.group({
    xyz: [{ value: '', disabled: true }, Validators.required]
});

Во время выполнения

this.formGroupName.get('xyz').disable({ onlySelf: true });

Получение значений из FormGroup (отредактировано)

Получить значения только из не отключенных полей

this.formGroupName.value;

Получить значения всех полей в FormGroup

this.formGroupName.getRawValue();

Так что здесь вам не нужен атрибут READONLY. Надеюсь, поможет.

Ответ 4

Вы можете (должен) отключить элемент управления с помощью одного компонента, а не HTML.

this.form.get('controlName').disable();

Использование readonly on tag генерирует предупреждение о проблемах безопасности.

Ответ 5

AS за быстрый способ. Я нашел ниже решение, которое работает.

Ответ 6

Элементы на основе formControl доступны только для чтения, когда отключено:

this._formBuilder.group({
        some: new FormControl(
          { value: parseInt(this.myobject.subObject.stringMember), disabled: true },
          Validators.required
        ),

Но это верно для IE и Chrome, но неверно для Firefox....

Популярный обходной путь - добавить специфичный для Firefox прозрачный <div> над входом и включить управление вводом при нажатии на прозрачный div:

CSS:

#wrapper {
  position: relative;
  &::after {
    content: "%";
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
#click {
  width: 100%;
  height: 35px;
  position: absolute; 
  background: transparent;
}

HTML:

 <label>
    <span class="label">Name </span>
    <div id="wrapper">
      <div
        *ngIf="isFirefox"
        id="click"
        (click)="enable('name')"
      ></div>-->
      <input type="text" formControlName="name" readonly />
    </div>
  </label>

машинопись:

export class MyObjectComponent implements OnInit {
  @Input() public group: FormGroup;
  isFirefox = /Firefox\//i.test(window.navigator.userAgent);

  constructor() {}

  ngOnInit() {}

  enable(name) {
    this.group.get(name).enable();
  }
}

Но это решение работает только с элементами <input>, но не с элементами <textarea>, ни с элементом <input>, если используется вложенный FormControl.

Реальное решение состоит в том, чтобы установить formcontrol как не отключенный:

this._formBuilder.group({some: new FormControl ({value: parseInt (this.myobject.subObject.stringMember), отключено: false}, Validators.required),

и, в то же время, установить или только для чтения:

  <label>
    <span class="label">SomeLabel</span>
    <textarea
      maxlength="500"
      formControlName="some"
      readonly
    ></textarea>
  </label>

или введите:

<input type="text" formControlName="name" />