CODEWITHSUNDEEP
checkboxangular5
Alexi Felix
Alexi Felix

Reputation: 163

Angular 5 disable and enable checkbox based on condition

I'm trying to implement a validation in which i want to disable the button if a specific value entered by user matches the value returned from a service, below is my code:

In the component, i call the service which returns the usernames like below, here is the console log for (UserNames):

0:{Name: "John", userId: "23432"}
1:{Name: "Smith", userId: "12323"}
2:{Name: "Alan", userId: "5223"}
3:{Name: "Jenny", userId: "124"}

in the template, i use NgFor to iterate over the usernames like below

    <div *ngFor="let id of UserNames let i = index;">  
    <input type="radio" name="radio" [checked]="UserNames.userid" (click)="Submit(UserInput)"> <span>Submit</span>
  </div>

What i want to achieve is if i enter 23432 the button should disabled because the service already returns userId with this value, unless a new user id entered the button should be enabled.

Upvotes: 2

Views: 4703

Answers (1)

Ovid2020
Ovid2020

Reputation: 181

So the general case of disabling a submit button in the way you're describing would look like:

<button type="submit" [disabled]="someValidationFn()" ...>

and someValidationFn() would, according to the use case you described, contain something like

return UserNames.find(name => { return name.userId === userInput;}));

where userInput is a separate property in the component bound to some user-entered value, presumably via an open text input like

<input name="userInput" [(ngModel)]="userInput" type="text" placeholder="Enter some user id">

But, from the markup snippet you pasted*, I'm not clear that you have that "text" input separate from the radio button group. If the radio button group is meant to have submit actions attached to its individual buttons (it shouldn't), then you're actually guaranteed that the user selection will contain a userId which exists in your UserNames array: the only inputs you're offering are based on the data which came from your service in the first place.

Based on the use case you're describing, I'm not sure why you'd have the radio button group. It sounds like you would just want that text input field with a validation method to make sure that user input does not already exist in the UserNames.

Because I wrote a bunch of abstract snippets there, I thought it might be helpful to show some basic html and js where I put it all together:

// html
<form submit="someSubmitAction()">
  <input name="userInput" [(ngModel)]="userInput" type="text" placeholder="Enter some user id">
  <button type="submit" [disabled]="someValidationFn()">Submit</button>
</form>

// js
/* don't forget your @Component annotation and class declaration -- I'm assuming these exist and are correct. The class definition encloses all the following logic. */
public userInput: string;
public UserNames: any[];
/* then some service method which grabs the existing UserNames on component's construction or initialization and stores them in UserNames */
public someValidationFn() {
    return UserNames.find(name => { return name.userId === userInput;}));
}
public someSubmitAction() { 
    /* presumably some other service method which POSTs the data */
}

*speaking of the snippet you pasted, there are a couple of errors there: *ngFor="let id of UserNames <-- you won't get an id by referencing into the UserNames array here; you'll get a member of the UserNames array in each iteration -- i.e., you'd get {Name: "John", userId: "23432"}, then {Name: "Smith", userId: "12323"}, and so on. That's not necessarily an error, but I'm assuming that, b/c you used id as your variable name, you were expecting just the userId field. Otherwise you'd have to use {{id.userId}} in each iteration to access the actual id. And bob.mazzo mentions another issue with the use of the [checked] attribute

Upvotes: 2

Related Questions