I am not able to dynamically set required attribute to input fields
My form's required attribute has to change dynamically based on a radio button field.
This is how the form looks when the radio button is set as wants to join screenshot. and when radio button is set as member/alumnus the form looks like this screenshot
I am not able to dynamically switch the required attribute for input fields in respective forms.
This is the code for contact and DOB field if new Member is checked
<label class="control-label is-imp"></label>
<div class="input-group">
<input type="radio" ng-model="joinFormData.joinType" value="wantsToJoin">I Want to join as member
<input type="radio" ng-model="joinFormData.joinType" value="alreadyMember">I am a member/alumnus
</div>
</div>
<div class="form-group no-pad-left" ng-if="joinFormData.joinType == 'wantsToJoin'">
<div class="nss-only" ng-if="clubType == 'NSS'">
<div class="form-group col-md-12 no-pad-left no-pad-right">
<div class="col-md-6 no-pad-left">
<label class="control-label is-imp">Contact:</label>
<input
type="text" class="form-control" id="body_contact"
name="body_contact" ng-model="joinFormData.contact" placeholder="1234567890" ng-pattern="/^[0-9]{10}$/" ng-minlength="10" ng-maxlength="10" integer [ng-required]="joinFormData.joinType == 'wantsToJoin'">
<span ng-show="joinForm.body_contact.$error.$invalid || joinForm.body_contact.$error.pattern"><span class = "red-color">Enter a valid number!</span></span>
</div>
<div class="col-md-6 no-pad-right">
<label class="control-label is-imp">DOB:</label>
<input
type="date" class="form-control" id="body_dob"
name="body_dob" ng-model="joinFormData.dob"
required ng-maxlength="100" required>
<span ng-show="joinForm.body_dob.$error.required && joinForm.body_dob.$touched"><span class="red-color">Required!</span></span>
</div>
</div> </div> </div>
This is the code for select type field if Member/ Alumnus is checked
<div class="form-group col-md-12 no-pad-left no-pad-right">
<div class="col-md-6 no-pad-left" ng-if="joinFormData.joinType == 'alreadyMember'">
<label class="control-label is-imp">I am already a member/alumnus:</label>
<div class="input-group">
<select ng-model="joinFormData.memberType"
class="form-control selectpicker" [required]="joinFormData.joinType == 'alreadyMember'" name="body_type">
<option value="" selected disabled>Select Type</option>
<option value="member">Member</option>
<option value="alumni">Alumni</option>
</select>
<!-- <span ng-if="!joinForm.body_type.$valid && joinForm.body_type.$touched"><span class="red-color">Required!</span></span> -->
</div>
</div></div>
I tried using [required]="joinFormData.joinType == 'alreadyMember'" conditions but that didn't work.
Kindly help me out. I am not able to figure out the mistake as i am new to angular
Related
I'm new to AngularJS. I need to show <p> when checkbox is checked = true. Currently <p> is showing when mouse hover-over. instead of that I need to show <p> when sendSMS is checked = true my code as follows,
<div class="col-xs-12">
<div class="form-group label-floating" ng-class="{'is-empty': vm.checkInData.telephone === null}">
<label for="phone" class="control-label">xxx-xxx-xxxx</label>
<input type="text" class="form-control" ng-model="vm.checkInData.telephone" id="phone"
ng-pattern="/^[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4}$/" name="phone" required>
<div ng-messages="vm.inputForm.phone.$error" ng-show="vm.formSubmitted || vm.inputForm.phone.$touched">
<div class="ngMessage" ng-message="required">Phone number is required.</div>
<div class="ngMessage" ng-message="pattern">Phone number should be a valid 10 digit one.</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="vm.checkInData.sendSMS"> Receive text updates
</label>
</div>
<p class="help-block">Message & data rates may apply.</p>
</div>
</div>
</div>
How can I do that.
<p class="help-block" ng-if="vm.checkInData.sendSMS">Message & data rates may apply.</p>
you could toggle the visibility of the p tag by using the ng-if.
I have angularJS validation issue with below field , if i use ng-model its not making form $valid even the value is selected, So i used k-ng-model now this field is out of the validation scope, Any suggetion will be appreciated.
main.html
<div class="row">
<div class="form-group col-md-12">
<label for="themesList" class="required col-md-4">Themes:</label>
<div class="col-md-8">
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
ng-model-options="{updateOn: 'blur'}"
k-ng-model="challengesDTO.themesKyList" required
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && addChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div
Im using angularjs and $invalid to add .has-error to my form group.. problem is one of my form groups has multiple inputs in it, side by side..
<div class="form-group">
<div class="col-sm-6">
<label for="location">Location</label>
<select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
</div>
<div class="col-sm-6">
<label for="name">Rack Size</label>
<input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>
</div>
</div>
validation would look similar to this, but would include additional validations for the size element as well.
ng-class="{ 'has-error': rackForm.location.$invalid && rackForm.location.$dirty }"
if name=size becomes invalid, as it stands .has-error is applied to the entire form group, and that can be confusing to the end user. Is there a way to either
apply the .has-error to a specific input
rearrange my form
layout a bit so each input is in its own form group, yet still retain
the side by side look.
The way i do it is to create form-group for each input element. Also, I believe you don't need inner <div class="col-sm-6"> since you can join that class with form-group and get the same results.
<div class="form-group col-sm-6" ng-class="{ 'has-error': rackForm.location.$invalid && rackForm.location.$dirty }">
<label for="location">Location</label>
<select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
</div>
<div class="form-group col-sm-6" ng-class="{ 'has-error': rackForm.size.$invalid && rackForm.size.$dirty }">
<label for="name">Rack Size</label>
<input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>
</div>
Let me know if it helped
The simple answer is you are trying to put too much logic into your HTML. Look in to creating Angular directives that implement your logic behind the scenes or do it in your controller, and set the state you are trying to check on your scope.
One of the key precepts of Angular is to not put logic in the HTML.
To do this without changing your layout, just use ng-class sintax in each div with col class. Like that:
<div class="form-group">
<div class="col-sm-6" ng-class="{ 'has-error': rackForm.location.$invalid && rackForm.location.$dirty }">
<label for="location">Location</label>
<select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
</div>
<div class="col-sm-6" ng-class="{ 'has-error': rackForm.size.$invalid && rackForm.size.$dirty }">
<label for="name">Rack Size</label>
<input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>
</div>
</div>
I'm Trying to create custom contact form in Joomla 3 , the reason is I didn't found such big contact form.
Can somebody tell me how to do it ?
html:
<div class="col-lg-12">
<form role="form" method="POST" style="margin-top: 2.7em;" action="">
<div class="row">
<div class="form-group col-lg-4">
<label for="input1">Name</label>
<input type="text" name="contact_name" class="form-control" id="input1">
</div>
<div class="form-group col-lg-4">
<label for="input2">Mail</label>
<input type="email" name="contact_email" class="form-control" id="input2">
</div>
<div class="form-group col-lg-4">
<label for="input3">Phone</label>
<input type="phone" name="contact_phone" class="form-control" id="input3">
</div>
<div class="form-group col-lg-4">
<label for="input1">Dropdown</label>
<select class="form-control" name="bud">
<option value="a">parterowy</option>
<option value="b">piętrowy</option>
<option value="c">bliźniak</option>
<option value="c">mieszkalny</option>
<option value="c">niemieszkalny</option>
</select>
</div>
<div class="form-group col-lg-4">
<label for="input2">Size</label>
<input type="email" name="contact_email" class="form-control" id="input2">
</div>
<div class="form-group col-lg-4">
<label for="input3">Garage</label>
<select class="form-control" name="garaz">
<option value="a">wolnostojący</option>
<option value="b">w budynku</option>
<option value="c">jednostanowiskowy</option>
<option value="c">wielostanowiskowy</option>
</select>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<label for="input4">Msg</label>
<textarea name="contact_message" class="form-control" rows="6"id="input4"></textarea>
</div>
<div class="form-group col-lg-12">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
</div>
Fiddle to html
I read that i need to create custom component or rebuild other, which one is better option ?
You could use Chronoforms component to create virtually any form you like.
If you need some very special custom output, you can first use the included form bulider to set up the closest approximation and modify it as you like.
As you have already made the html part, the easier way is to implement your code in a custom module or for a more advanced result in a custom component.
The official joomla way for adding extra fields to contact form is by creting a custom plugin.
If you want a commercial solution (component) I would suggest you to use breezingforms.
Hope this helps
I have form which contains some fields and have validated these fields by using angular.validator. The error messages are displayed under every fields. But I want to display this error messages using tooltip. For example , if some particular field is not valid , the error message should be shown on the right of the field box. I didn't found a solution from other posts of stackoverflow. How to do this ?
I want to show this field is required in a tooltip. ( by making directive) .
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Contact No</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.contactNo" validator="[required, number]" class="form-control" id="" placeholder="" validation-message="Only numeric values are valid!">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Profile Picture</label>
<div class="col-sm-8 companyLogo"> <img src="assets/img/user.png" alt="..." class="img-rounded col-sm-3 ">
<input type="file" id="exampleInputFile" ng-model="proFormSubmit.profilePic">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Language</label>
<div class="col-sm-8">
<select class="form-control" ng-model="proFormSubmit.language" validator="[required]">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Address 1</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.address1" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Address 2</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.address2" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">City</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.city" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">State</label>
<div class="col-sm-8">
<select class="form-control" ng-model="proFormSubmit.state" validator="[required]">
<option></option>
<option value="Indonesia">Tamilnadu</option>
<option value="Indonesia">Kerala</option>
<option value="Indonesia">Rajasthan</option>
</select>
</div>
</div>
I use http://angular-ui.github.io/bootstrap which has a $tooltipProvider that allows you to modify behavior of the tooltip. Other than that this seems like a CSS + ng-show candidate