2

Purpose is to allow a button to change isEdit to true or false. On true, the controls are enabled (editable), but on false they are still visible only disabled.

Angular 2, the following WORKS for checkboxes:

<input *ngIf="isEdit === true"
       type="checkbox"
       (change)="onChange($event)" />

<input *ngIf="isEdit === false"
       type="checkbox"
       disabled
       (change)="onChange($event)" />
<span><ng-content></ng-content></span>

However the same does NOT work for radio button:

<input *ngIf="isEdit === true"
       type="radio"
       [name]="name"
       (change)="onChange($event)" />

<input *ngIf="isEdit === false"
       type="radio"
       disabled
       [name]="name"
       (change)="onChange($event)" />
<span><ng-content></ng-content></span>

The corresponding HTML:

  <radio-button [id]="'Standard'"
                [value]="standard"
                [isEdit]="isEdit"
                [groupName]="'choices'"
                > Standard - password contains at least 1 character from 3 of the character sets below.
  </radio-button><br>
  </div>
  <radio-button [id]="'Custom'"
                [value]="custom"
                [isEdit]="isEdit"
                [groupName]="'choices'"
                > Custom
  </radio-button>

The same screen has other controls responding to isEdit changing true/false so I know isEdit is being set properly.

The relevant part of the component:

export class RadioButtonComponent implements AfterViewInit {
  @Input() id: string;
  @Input() checked: boolean;
  @Input() disabled: boolean;
  @Input() value: boolean;
  @Input() isEdit: boolean;
  @Input('groupName') name: string;
  @Output('onChange') onChangeEvent = new EventEmitter;
  BSubj: BehaviorSubject<ElementState>;
  public InstanceId: string;
  constructor(private pagMgr: PageMgrService) {
    this.InstanceId = pagMgr.GetUniquePageId();
    this.BSubj = pagMgr.GetSubject();
    this.isEdit = false;
    this.disabled = false;
  }

Tried wrapping in span or div... haven't tried jumping off a bridge yet, but I'm close. Any ideas? I appreciate your help.
Thanks in advance.

pnuts
  • 58,317
  • 11
  • 87
  • 139
Yogi Bear
  • 943
  • 2
  • 16
  • 32
  • How does it not work? Is it displaying the wrong one? Or just not disabling the button? – DeborahK Aug 11 '17 at 18:44
  • I tried your code on plunkr [here](https://plnkr.co/edit/TLlNaO8knSmnJjv026V7?p=preview) and it is working. Please be more specific about your problem. – BogdanC Aug 11 '17 at 19:02
  • The only difference I can see so far is that I'm in Angular 2 and the plunker is in the latest 4. Depending on what I tried, the radio either didn't display at all or was disabled and stayed that way no matter how I changed the idEdit flag. Since you got it to work, let me go back and tinker so more this weekend. Thanks for the assist. – Yogi Bear Aug 11 '17 at 22:06
  • @YogiBear There used to be bugs with disabling form controls (actually with boolean HTML attributes and properties in general) in earlier version of Angular. If you upgrade to the latest version, it should work correctly. – Lazar Ljubenović Aug 12 '17 at 10:37
  • Thanks for that comment Lazar... based on ALL comments, upgraded to Angular 4.3.4; I see there has been lots of improvements in this area. Checkbox works using [disabled]="!isEdit"; however type="radio" doing [disabled]="!isEdit" makes the radio button always disabled. I also tried using *ngIf="isEdit" without disabled and *ngIf="!isEdit" with disabled and I get the same results. Always disabled. (Also tried *ngIf="isEdit === false" (or true) and same results. Any other thoughts? Thanks VERY much for all your help. – Yogi Bear Aug 12 '17 at 15:44

0 Answers0