Selecting text in input and deleting not change input value (Angular)

Question

I have an input and a button that reads the value and add it to the list.

Here is the code:

<div class="row mt-2">
    <div class="col-8">
        <input
           #sparePartsInput
           class="form-control"
           type="text"
           name="sparePart"
           maxlength="32"
           />
           {{sparePartsInput.value}}
    </div>
    <div class="col-4">
        <button
            [disabled]="sparePartsInput.value == '' || sparePartsInput.value.trim() == ''"
            type="button"
            class="btn btn-primary"
            (click)="addItemToSpareParts(sparePartsInput.value)>
            <i class="fa fa-plus"></i>
        </button>
    </div>
</div>

I set the button disabled when the value of the input is empty.

But when I select the value with CTRL+A and delete, its value seems not to empty. I need to click delete one more time and then it will be cleared. How can I fix this stuff?

Adrita Sharma · Accepted Answer · 2019-11-25 09:15:32Z

1

Use [(ngModel)]="sparePartValue"

Try like this:

Working demo

<div class="row mt-2">
    <div class="col-8">
        <input
           #sparePartsInput
           class="form-control"
           type="text"
           name="sparePart"
           maxlength="32"
           [(ngModel)]="sparePartValue"
           />
           {{sparePartsInput.value}}
    </div>
    <div class="col-4">
        <button
            [disabled]=" sparePartValue == null ||sparePartValue == ''"
            type="button"
            class="btn btn-primary"
            (click)="addItemToSpareParts(sparePartsInput.value)">
            <i class="fa fa-plus"></i>Button
        </button>
    </div>
</div>

answered Nov 25, 2019 at 9:15

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Selecting text in input and deleting not change input value (Angular)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related