неактивное свойство переключателя не работает внутри реактивной формы

Question

Отключенное свойство переключателя не работает внутри реактивной формы, но работает нормально, когда я помещаю переключатель за пределами реактивной формы.

У меня есть условие, например, если мой текущий статус ЗАКРЫТО Я должен разрешить пользователю редактировать радиокнопку внутри реактивной формы, которую я уже пробовал, со свойством Отключено радиокнопки, но не повезло

component.ts

conducttestlm:any={
    isReadOnly:false
}
this.condutTestLM=this.formBuilder.group({
    "testStatus":['',Validators.required],
})
if(success.data.status=='CLOSED'){
    this.conducttestlm.isReadOnly=true;
}

component.html

<form [formGroup]="condutTestLM">
    <div class="row radio-top">
        <div class="col-md-6 p-l-15">
            <label class="radio-box">
                <input formControlName="testStatus" name="testStatus" [(ngModel)]="conducttestlm.teststatus" [disabled]="conducttestlm.isReadOnly" value="Pass" type="radio">
                <span class="checkmark"></span>
                <span class="font-style">Pass</span>
            </label>
        </div>
        <div class="col-md-6 p-l-15">
            <label class="radio-box">
                <input formControlName="testStatus" name="testStatus" [(ngModel)]="conducttestlm.teststatus"  [disabled]="conducttestlm.isReadOnly" value="Fail" type="radio">
                <span class="checkmark"></span>
                <span class="font-style">Fail</span>
            </label>
        </div>
    </div>
</form >

Мне нужно отключить переключатель

Answer 1

Не используйте шаблонный подход при использовании реактивных форм.Используйте ваш код, например:

<form [formGroup]="condutTestLM">
  <div class="row radio-top">
      <div class="col-md-6 p-l-15">
        <label class="radio-box">
          <input formControlName="testStatus" name="testStatus" [attr.disabled]="conducttestlm.isReadOnly ? true : null" value="Pass" type="radio">
          <span class="checkmark"></span>
          <span class="font-style">Pass</span>
        </label>
      </div>
      <div class="col-md-6 p-l-15">
        <label class="radio-box">
          <input formControlName="testStatus" name="testStatus" [attr.disabled]="conducttestlm.isReadOnly ? true: null" value="Fail" type="radio">
          <span class="checkmark"></span>
          <span class="font-style">Fail</span>
        </label>
      </div>
    </div>
</form>

См. Пример здесь: https://stackblitz.com/edit/angular-dncxac?file=src%2Fapp%2Fapp.component.html

Вы заметите, что я использовал attr.disabled вместо disabled для отключения отдельных переключателей.Чтобы узнать разницу между attr.disabled и disabled, вы можете взглянуть на эту ссылку .В сущности, attr.disabled - это атрибут HTML, а disabled - это свойство DOM.Есть некоторые атрибуты HTML, для которых свойства DOM не существуют, как показано в добавленной ссылке.

С угловые документы

Атрибутыопределяется HTML.Свойства определяются DOM (объектная модель документа).

• Некоторые атрибуты HTML имеют отображение 1: 1 на свойства.id является одним из примеров.
• Некоторые атрибуты HTML не имеют соответствующих свойств.Одним из примеров является colspan.
• Некоторые свойства DOM не имеют соответствующих атрибутов.textContent - один из примеров.
• Многие атрибуты HTML отображаются в свойствах ... но не так, как вы думаете!

Это не так для полей вводаи disabled свойство DOM.Действительно, есть свойство disabled DOM, но есть некоторая проблема при его использовании по отдельности через переключатели.Смотрите этот Github выпуск .Предложенное мной решение - это скорее обходной путь для индивидуального отключения переключателей.

Answer 2

Одна из возможностей заключается в том, что изменение статуса не обнаруживается во время рендеринга.Прежде всего:

// instead of using this: 
[disabled]="conducttestlm.isReadOnly"

// Use the readonly attribute:
[readonly]="conducttestlm.isReadOnly"

Далее, используйте ChangeDetectorRef , чтобы обнаруживать любые изменения вручную:

// import it: 
import { ChangeDetectorRef } from '@angular/core';

// and inject it into your contructor:
constructor(private ref: ChangeDetectorRef) {
    ...
}

// call it
if(success.data.status=='CLOSED'){
    this.conducttestlm.isReadOnly=true;
    this.ref.detectChanges();
}

Должен обнаруживать изменения в статусе сразу при запуске.Если нет, попробуйте записать в консоль ваше значение conducttestlm.isReadOnly, чтобы убедиться, что оно меняется.

Если вы хотите использовать атрибут на основе шаблона, вы также можете использовать [attr.disabled] вместо [disabled].