without using form for validation How can I disabled a button in angular if field is empty

Question

I am trying to do @output in angular for that I have an input field with a button, I will send input's field data to parent by using @output() I want to disabled a button if the input field is empty, How can I disable without using form validation.

I tried this code

  <input type="text" [(ngModel)] = "childInput" >
  <button [disabled] ="!childInput.value" (click)="sendToParent()">Send To Parent</button>

but it keeps disabled the button if the input field is empty or not.

P.S I found answer with form validation but I didn't want to do with form validation or defining a bool variable

CSS? http://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css — mplungjan, May 08 '17 at 11:51
thank you @Und3rTow for your suggestions I have solved the problem — , May 08 '17 at 13:34
thank you @mplungjan for your suggestions I have solved the problem — , May 08 '17 at 13:35

score 3 · Answer 1 · answered May 08 '17 at 12:17

3

If you don't want to use ngModel:

<input type="text" #childInput >
<button [disabled]="!childInput.value.length>0" (click)="sendToParent()">Send To Parent</button>

answered May 08 '17 at 12:17

Pastafari

171
9

I've tested it and for me it works without problems. The usage of reference variables is explained in [link](https://angular.io/docs/ts/latest/guide/user-input.html) – Pastafari May 08 '17 at 13:15
This works, but somehow it stops working if I use >10 or anything other than 0. – inaitgaJ Jul 13 '18 at 11:06

score 0 · Accepted Answer · answered May 08 '17 at 13:54

0

this code will work

<input type="text" [(ngModel)] = "childInput" >
<button [disabled] ="!childInput" (click)="sendToParent()">Send To Parent</button>

answered May 08 '17 at 13:54

Naveed Aheer

1,715
6
25
40

without using form for validation How can I disabled a button in angular if field is empty

2 Answers2