<input type="radio" name="ptype" value="{{a}}" ng-model="group" checked>
<div class="row" id="{{a}}">
<div class="form-group">
<select class="form-control" ng-model="group" value="1" id="btype" ng-options="idBankCard as vcBankCardDesc.vcDescription for (idBankCard, vcBankCardDesc) in b.status" name="idGroup" ng-disabled="group== 2">
<option value="">--Please Select Payment--</option>
</select>
</div>
</div>
I have two select options. When I select option 1 then option 2 should be disabled. I tried many way but still cannot work...Anyone can give me solution?
Related
So in AngularJS i was using the following to show specific form elements based on a value that is captured by a model:
<fieldset class="full-width sm-padding">
<label>Do you have any major medical conditions such as
heart conditions, cancer or diabetes?</label>
<div class="inline-flex">
<input type="radio" name="medicalCondition" value="yes"
tabindex="16" ng-model="clientDetails.medicalCondition">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="medicalCondition" value="no"
tabindex="17" ng-model="clientDetails.medicalCondition">No<br>
</div>
</fieldset>
<fieldset class="full-width sm-padding" ng-
if="clientDetails.medicalCondition == 'yes'">
<label>Are you currently taking any medication or do you
have any other medical conditions? For example HBP, Cholesterol, Asthma,
Depression? (Both lives if cover for couple)</label>
<div class="inline-flex">
<input type="radio" name="otherMedicalCondition"
value="yes" tabindex="18" ng-
model="clientDetails.otherMedicalCondition">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="otherMedicalCondition"
value="no" tabindex="19" ng-
model="clientDetails.otherMedicalCondition">No<br>
</div>
</fieldset>
How can I do the same thing in Angular 2?
Have tried this but not working:
<fieldset class="full-width sm-padding">
<label>Do you smoke?</label>
<div class="inline-flex">
<input type="radio" name="smoker" value="yes"
tabindex="12" [(ngModel)] = "clientDetails.smoker">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="smoker" value="no" tabindex="13" [(ngModel)] = "clientDetails.smoker">No<br>
</div>
</fieldset>
<div class="full-width flex" *ngIf="clientDetails.smoker ===
'Yes'">
<fieldset class="one-quarter sm-padding">
<label>What do you smoke?</label>
<input list="whatDoYouSmoke" name="whatDoYouSmoke"
tabindex="14">
<datalist id="whatDoYouSmoke">
<option value="Cigarettes">
<option value="Cigars">
<option value="Pipe">
<option value="E-Cigs">
<option value="Other">
</datalist>
</fieldset>
<fieldset class="one-quarter sm-padding">
<label>How many per day?</label>
<input type="number" min="0" name="howManySmokesPerDay"
tabindex="15">
</fieldset>
</div>
What am I doing wrong?
Have tried so many different options but can't quite get it to work!
thanks
The only thing I can see is that you have typed [(ngModel)] = "", try without spaces like: [(ngModel)]="". Also noticed that in your *ngIf="clientDetails.smoker ===
'Yes'", try with a little 'y' in yes as: *ngIf="clientDetails.smoker ===
'yes'". Since you are setting the value to "yes" and not "Yes" in your radio button.
There is a case problem in the Angular version. The first 'yes' starts with a lower case y and a second 'Yes' with a upper case Y.
For anyone out there looking for a solution to this, I ended up doing the following:
<fieldset class="full-width sm-padding">
<label>Do you smoke?</label>
<div class="inline-flex">
<input type="radio" name="smoker" [(ngModel)]="smoker"
[value]="true" [checked]="smoker" /> Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="smoker" [(ngModel)]="smoker"
[value]="false" [checked]="!smoker" /> No<br>
</div>
</fieldset>
<div class="full-width flex" *ngIf="smoker">
<fieldset class="one-quarter sm-padding">
<label>What do you smoke?</label>
<input list="whatDoYouSmoke" name="whatDoYouSmoke" tabindex="14">
<datalist id="whatDoYouSmoke">
<option value="Cigarettes">
<option value="Cigars">
<option value="Pipe">
<option value="E-Cigs">
<option value="Other">
</datalist>
</fieldset>
<fieldset class="one-quarter sm-padding">
<label>How many per day?</label>
<input type="number" min="0" name="howManySmokesPerDay"
tabindex="15">
</fieldset>
</div>
So my problem is as follows, i have this HTML
<div class="col-sm-4">
<p><span>Teste A/B:</span></p>
<label class="label-radio">
<input type="radio" class="radio" name="ab-test" value="true" ng-model="isTestAvailable"> Sim </label>
<label class="label-radio">
<input type="radio" class="radio" name="ab-test" value="false" ng-model="isTestAvailable"> Não </label>
</div>
<div class="col-sm-4">
<p><span>Nº de testes:</span></p>
<select class="form-control" ng-model="tests.number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
What i'm trying to do is make it so that when the user changes the select to another value i generate the given amount of test inputs via ng-repeat
<div ng-if="isTestAvailable == 'true'" ng-repeat="test in tests">
<hr>
<div class="row">
<div class="col-sm-12">
<h3>Test {{$index}}</h3>
<p><span>Specifications:</span></p>
<textarea id="teste1" class="form-control" onkeyup="resizeTextarea('test1')" data-resizable="true"></textarea>
</div>
</div>
<hr>
</div>
My controller contains this $watch
$scope.$watch("tests.number", function(newVal, oldVal) {
$scope.tests = [{}];
var i = parseInt(newVal);
for(var x = i; x <= newVal; x++) {
$scope.tests.push({});
}
});
that i tried to use in order to change the amount of test objects when the value changes, i tried using a simple variable as well and doing ng-repeat("i in tests.number") instead but that didn't work, what can i do so that the ng-repeat works with my given select option value?
I suggest to you, to use another variable instead of tests.number because you override it in your watcher.
Please check this plunker : https://plnkr.co/edit/XnV9MKjIYe1YOL4hR6Le?p=preview
I use another variable and bind ng-change instead of watch
<select class="form-control" ng-model="testNumber" ng-change="changeTestNumber()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I have 2 selects side by side both getting 6 columns each.
In order to get them to look correctly I have removed the left padding from the left select and the right from the right.
Using classes pull-left and pull-right does not have any effect.
However when I decrease the view port size it no longer looks correct.
What is the best way to achieve what I need?
<div class="row">
<div class="col-md-6">
<label>Min Year:</label>
<select class="form-control" ng-model="minYear" ng-options="" required>
<option value="">Min</option>
</select>
</div>
<div class="col-md-6">
<label>Max Year:</label>
<select class="form-control" ng-model="maxYear" ng-options="" required>
<option value="">Max</option>
</select>
</div>
</div>
thank.
for the decrement of size you shold add the correct col for sm and xs
div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<label>Min Year:</label>
<select class="form-control" ng-model="minYear" ng-options="" required>
<option value="">Min</option>
</select>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label>Max Year:</label>
<select class="form-control" ng-model="maxYear" ng-options="" required>
<option value="">Max</option>
</select>
</div>
</div>
<form name="companyProfileForm" autocomplete="false" novalidate ng-submit="OnSaveCompanyProfile(companyProfileForm.$valid)" ng-controller="companyProfileDataEntryController">
<section ng-hide="!IsCompanyKnown();" class="row">
<div class="small-12 medium-6 large-6 columns">
<!--Industry-->
<section class="row">
<div class="small-12 medium-12 large-12 columns" ng-class="{ 'has-error' : (companyProfileForm.Industry.$invalid && submitted) }">
<div class="form-group">
<label for="Industry">*Industry</label>
<select name="Industry"
ng-model="CompanyProfileModel.IndustryId"
ng-options="item.Id as item.Description for item in IndustryList"
required>
<option value=null>-- select an industry --</option>
</select>
<span class="help-block" ng-show="companyProfileForm.Industry.$invalid && submitted">Please select a value.</span>
</div>
</div>
</section>
</div>
</section>
<button></button>
</form>
No matter what I do this form will evaluate to true. I want it to throw an error that Industry is required. Upon submit it goes to a function that prints to the console the parameter. It prints true every time.
You need to use the AngularJS ng-required directive, not required. Change the select element required to ng-required="true":
<select name="Industry" ng-model="CompanyProfileModel.IndustryId" ng-options="item.Id as item.Description for item in IndustryList" ng-required="true">
<option value=null>-- select an industry --</option>
</select>
Using 'required' on a form element will work in angular so long as your form element has an ng-submit="action()" and a button EXACTLY as follows inside the form:
<button type='submit' ng-click='submit()'>SomeText</button>
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