How to validate gender (radio button) in angular - javascript

How can I validate if gender was selected in angular, also I want the warning message to disappear once I select male or female.
I tried the code below but it works for inputs field such name or email
but for radio button it shows the error message even if I selected one option
this.registerForm = this._formBuilder.group({
gender: ['', Validators.required]
});
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.registerForm.invalid) {
return;
}
}
HTML
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="custom-control custom-radio">
<input type="radio" id="female" value="F" name="gender" required>
<label for="female">Female</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="male" value="M" name="gender"required>
<label for="male">Male</label>
</div>
<div *ngIf="submitted && f.gender.errors"
[ngClass]="{ 'd-block': submitted && f.gender.errors }">
<div *ngIf="f.gender.errors.required">Gender is required</div>
</div>
<button>Sign up</button>

You forgot to bind the inputs to the FormControl. Add formControlName="gender" to both inputs and it should work.
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
...
<input type="radio" id="female" value="F" name="gender" formControlName="gender">
...
<input type="radio" id="male" value="M" name="gender" formControlName="gender">
...
Cheers

Related

Radio button is not getting checked in angular 2

I have created two radio button for gender, I want to display radio button checked that was previously selected.
I have added below code in Template
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
</label>
</div>
</div>
I have added below code in Component.
console.log(this.gender); // I am getting 'male' here.
this.editProfile = new FormGroup({
gender: new FormControl(this.gender || null)
});
Other value of the form is getting displayed but radio button is not getting checked.
You can write it like
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
</label>
<button type="submit" [disabled]="form.invalid">Submit</button>
{{form.value|json}}
</form>
It should work for you
Find a PLUNK here
I have found other solution. We can use below code
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" [checked]="editProfile.value.gender == 'male'" formControlName="gender" value="male"/> Male
</label>
<label class="radio-inline">
<input type="radio" [checked]="editProfile.value.gender == 'female'" formControlName="gender" value="female"/> Female
</label>
</div>
</div>
As you are using Reactive Forms you can omit name attribute on input and because you are setting string value to input so you have to use value="male" instead of [value]="'male'".
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" formControlName="gender" value="male"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" value="female"/> Female
</label>
</div>
</div>

Angularjs radio selection as checked

I am trying to create selection when new user is created it will need a group. It is working nicely, but the "checked" option doesn't work for some reason. How can I make the "user" as checked so it would be true if create new user button is pressed?
<div class="radio-group" required>
<h3>Set user group</h3>
<label class="radio-inline">
<input type="radio" name="groupradio" value="2" ng-model="groups.group" required> Admin
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="1" ng-model="groups.group" checked> User
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="3" ng-model="groups.group"> Viewer
</label>
</div>
<button class="btn-sonera" ng-click="createUser(user, groups)"><i class="fa fa-floppy-o" aria-hidden="true"></i> Create user</button>
With AngularJs best is use its directive:
ng-checked="variable"
I managed to make it checked with ng-init="groups.group=1" Because I need the value assigned to the radio. Is there something wrong using it this way?
Full code
<div class="radio-group" required>
<h3>Set user group</h3>
<label class="radio-inline">
<input type="radio" name="groupradio" value="2" ng-model="groups.group" required> Admin
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="1" ng-model="groups.group" ng-init="groups.group=1"> User
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="3" ng-model="groups.group"> Viewer
</label>
</div>
Here is a working plunker: https://plnkr.co/edit/4VtblBSWROLTETW5Ie5C?p=preview
The core code:
$scope.groups = {
admin : false,
user: false,
viewer: false
};
And in the view:
<button class="btn-sonera" ng-click="groups.user=true"><i class="fa fa-floppy-o" aria-hidden="true"></i> Create user</button>
Note how each ng-model is bound to an object, ie: groups.admin, groups.user etc.
Could you please try by using ng-value
<label>
<input type="radio" ng-model="groups.group" value="1">
Admin
</label><br/>
<label>
<input type="radio" ng-model="groups.group" value="2">
User
</label><br/>
<label>
<input type="radio" ng-model="groups.group" value="3">
Viewer
</label><br/>
in controller
$scope.createUser = function(user, groups){
groups.group = "2";
};

radio button not shows updated value

I'm trying to update values from form except gender value all updates.
Gender value is not updating
here is code for gender radio button.
<label>
Gender: </label>
<input type="radio" id="gender" name="gender" value="male" required> Male
<input type="radio" name="gender" id="gender" value="female" required> Female
<input type="radio" name="gender" id="gender" value="other" required> Other
I'fetching value of form using js function which send it to update function.
var gender = $('#gender').val();
what mistake I had made?
This should work
// Get the value from a set of radio buttons
$('input:radio[name="gender"]:checked').val();
See also the examples given at http://api.jquery.com/val/
try this,
var gender = $('#gender:checked').val();
https://jsfiddle.net/dave17/tdk60unr/
i hope it will be helpful.
try this code working fine at my end
<form >
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>

how to get value from selected radio button

sir, i have a form input like input text and radio button.
how to get the value of selected radio button, and put that value to the input type text.
heres jsfiddle, https://jsfiddle.net/czw71dfk/2/
<div id="gender" class="form-inline">
<div class="form-group">
<label for="">I Sign up as</label>
<input #id="place" type="text" class="form-control" readonly/>
<div class="radio-inline">
<label class="label_item" for="radioMale">
<input type="radio" class="radio_item" value="male" name="gender" id="radioMale">
</label>
<p class="text-center colorGrey">Male</p>
</div>
<div class="radio-inline">
<label class="label_item" for="radioFemale">
<input type="radio" class="radio_item" value="female" name="gender" id="radioFemale">
</label>
<p class="text-center colorGrey">Female</p>
</div>
<div class="radio-inline">
<label class="label_item" for="radioKids">
<input type="radio" class="radio_item" value="Kids" name="gender" id="radioKids">
</label>
<p class="text-center colorGrey">Kids</p>
</div>
</div>
</div>
$('#gender input').on('change', function() {
var gender = $( this ).val();
$("#place").val( gender );
});
HTML problem #id="place",
And must be using on change;
$(document).ready(function(){
$('input[name=gender]').on('change', function() {
var gender = $( this ).val();
$("#place").val( gender );
});
});
JSFiddle.net Example
Change #id="place" To id="place" https://jsfiddle.net/czw71dfk/4/
<input #id="place" type="text" class="form-control" readonly/>
To
<input id="place" type="text" class="form-control" readonly/>

Validate using jQuery based on input type = radio/checkbox/select

I need to validate input fields like text, email, radio, checkbox, select. Lets say I have this :
<fieldset>
<div class="form-top">
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-first-name">First name</label>
<input type="text" name="form-first-name" placeholder="First name..." class="form-first-name form-control" id="form-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="form-last-name">Last name</label>
<input type="text" name="form-last-name" placeholder="Last name..." class="form-last-name form-control" id="form-last-name">
</div>
<div class="form-group">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</div>
<div class="form-group">
<label class="sr-only" for="form-about-yourself">About yourself</label>
<textarea name="form-about-yourself" placeholder="About yourself..." class="form-about-yourself form-control" id="form-about-yourself"></textarea>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
In jQuery I use this to validate :
$('.registration-form .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
console.log(parent_fieldset);
var next_step = true;
parent_fieldset.find('input[type="text"], input[type="radio"], input[type="password"], textarea').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
The input type=text and textarea validations are working but not the input type=radio. Any Idea ?
UPDATE 1
I'm working on a multi step form and I use this example and in this example I added in the first step
<div class="form-group">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</div>
Don't check the ($this).val() for radio you should check :
($this).find(":selected").text();
EDIT
One little exemple :
$('.btn').on('click', function() {
$("input[type='radio']").each(function() {
var radioName= $(this).attr('name');
var isChecked =$("input[name='"+radioName+"']:checked").val();
if( $(this).val() != "" && isChecked){
$("#result").html('success');
}
else {
$("#result").html('error');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</div>
<div id="result"></div>
<input type="button" class="btn" value="send"/>

Categories

Resources