Angular 4-在内部使用ngModel（单击）

Question

So I have the following html:

<div class="workflow-row">
    <input type="checkbox" id="new-workflow" [(ngModel)]="new_checkbox"> 
    <label>New Workflow</label>
    <input type="text" *ngIf="new_checkbox" placeholder="Enter Workflow Name">
</div>  
<div class="workflow-row">
    <input type="checkbox" id="edit-workflow" [(ngModel)]="edit_checkbox"> 
    <label>Edit Workflow</label>
    <select *ngIf="edit_checkbox"></select>
</div>

I want the checkboxes to act like radio buttons, ie: if one is checked, the other one becomes unchecked with angular 4. I tried doing

<input type="checkbox" id="edit-workflow" (click)="new_checkbox.checked = false" 
[(ngModel)]="edit_checkbox">

but I get an error and it says that new_checkbox is undefined. The weird thing is that new_checkbox and edit_checkbox work inside the ngIf statements but not inside the (click) 's. What am I doing wrong?

Answer 1

I suggest you to try the following:

component.ts:

export class AppComponent {
    edit_checkbox = false;
    new_checkbox = true;

    dropNewValue() {
        this.new_checkbox = false;
    }

    dropEditValue() {
        this.edit_checkbox = false;
    }
}

Then in your template file, eg component.html , change your template slightly to:

<div class="workflow-row">
    <input type="checkbox" id="new-workflow" [(ngModel)]="new_checkbox" (ngModelChange)="dropEditValue()">
    <label>New Workflow</label>
    <input type="text" *ngIf="new_checkbox" placeholder="Enter Workflow Name">
</div>
<div class="workflow-row">
    <input type="checkbox" id="edit-workflow" [(ngModel)]="edit_checkbox" (ngModelChange)="dropNewValue()">
    <label>Edit Workflow</label>
    <select *ngIf="edit_checkbox"></select>
</div>

I've just tried this and it works. However I do recommend to switch to radio buttons approach, because you will get the same behavior out of the box.

Answer 2

Don't write Angular like you're writing regular javascript instead of

(click)="new_checkbox.checked = false"

do something like

// .html
(click)="uncheckNewCheckbox()"

// .js or .ts
uncheckNewCheckbox() {
  this.new_checkbox.checked = false;
}