enable/ disable button based on value entered in text box angular 4 - initial load not working

Question

I need to enable / disable the below button and I have the below code. It works fine only from second time onwards. Initially when I land on the page, the button should be disabled because I dont have a value in the input box. If i enter something inside the text box and delete it , the button gets disabled. How do I disable the button for the first when I land on the page in angular 4

<input type="email" class="form-control" id="inputValue"  placeholder="[email protected]" formControlName="inputValue">
 <button type="button" id="verifyBtn" [disabled]="inputValue === ''" class="btn btn-primary btn-large" (click)="verify()">Verify</button>

Sidenote... do not use formcontrol and ngmodel together. It will be deprecated soon anyway. And from v6, this would also give you a warning. — AVJT82
– AVJT82, Commented May 25, 2018 at 5:30
You would set the initial value for the formcontrol instead of ngModel. But in this case you wouldn't want an intial value :) Pleae show the component code. — AVJT82
– AVJT82, Commented May 25, 2018 at 5:34
@AJT_82 I have lots of code in component file. Which part of component code you want to see? — Nancy
– Nancy, Commented May 28, 2018 at 8:51

Mavlarn · Accepted Answer · 2018-05-28 09:05:58Z

11

You can set input like this:

[disabled]="!inputValue"

Because the inputValue value is not set at the beginning, which is undefined, so when you check inputValue === '' it will be false

[Update based on comment]
If you use [(ngModel)], which is bi-directional, you need to be careful about the data input from view to controller, and output from controller to view. In many times, It is a bad design.

Because you use fromControlName, which is reactiveForm, you should just use reactiveForm and subscription to handle input value. You can check the post

edited May 28, 2018 at 9:05

answered May 25, 2018 at 5:33

Mavlarn

3,8812 gold badges41 silver badges58 bronze badges

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

5 Comments

Nancy Over a year ago

Excellent solution!1

Nancy Over a year ago

I think there is a problem with because of both ngModel and formControlName . With ngModel , I am getting the value of inputValue field as undefined in ts file. (this.personalDtlsForm.value.inputValue !== ''") If i remove that ngModel , the value is getting passed as "" . As a result of this I had to remove the ngModel code. Is there any way to achieve this without using ngModel ?

Nancy Over a year ago

But where is the solution ? How do i disable the button without using ngModel and with formControlName

Mavlarn Over a year ago

When using reactive forms, you can use the form validation, and using the validation result to control whether to disable or show error.

Nancy Over a year ago

That is for form validation . I was asking to disable a single button that is present inside the form

Pranay Rana · Accepted Answer · 2018-06-05 05:02:59Z

2

Based on you updated question you want to disable button control when you land on page , to do that you should create your form control like as below

this.heroForm = this.fb.group({
  inputValue : ['', Validators.required ],
});

if you do as above then you control will enter in invalidate state first time itself. in your button html you should do this

<form [formGroup]="heroForm">
    <button
     type="button"
     id="verifyBtn"
     formControlName="inputValue"
     [disabled]="heroForm.get('inputValue').invlaid"
     class="btn btn-primary btn-large"
     (click)="verify()">Verify</button>
  </form>

can you try like this , so code below checks inputvalue is there or not and if inputvalue is there check that its has value or not

[disabled]="!inputValue || (inputValue && inputValue.length < 1)"

edited Jun 5, 2018 at 5:02

answered May 25, 2018 at 5:40

Pranay Rana

177k37 gold badges244 silver badges266 bronze badges

9 Comments

Nancy Over a year ago

Great solution !!

Nancy Over a year ago

I am facing the issue with this. I have mentioned by comment in the above answer

Pranay Rana Over a year ago

@Nancy - i dont see comment on my answer ...where you commented

Nancy Over a year ago

I think there is a problem with because of both ngModel and formControlName . With ngModel , I am getting the value of inputValue field as undefined in ts file. (this.personalDtlsForm.value.inputValue !== ''") If i remove that ngModel , the value is getting passed as "" . As a result of this I had to remove the ngModel code. Is there any way to achieve this without using ngModel ?

Pranay Rana Over a year ago

@Nancy - you cannot use both Template drive from approch and Rective form approach, you have to use one of them ...if you can update question i can add my answer according to it ....

|

Collectives™ on Stack Overflow

enable/ disable button based on value entered in text box angular 4 - initial load not working

2 Answers 2

5 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related