I have a set of radio buttons and want to set the correct choice. I have a value financing.is_reamortizable which should reflect whether the end user has this clicked. How could / should I bind this or check via computed property or other choice?
<div class='row both10'>
<div class='col-md-4 input-group'>
Reamortization Available:
</div>
<div class='col-md-3 input-group'>
Yes<input type='radio' name='financing[is_reamortizable]' value="true" v-bind:value="financing.is_reamortizable" />
</div>
<div class='col-md-3 input-group'>
No<input type='radio' name='financing[is_reamortizable]' value="false" />
</div>
</div>
The official documentation shows that you should set v-model on both radio buttons to the same variable (https://v2.vuejs.org/v2/guide/forms.html#Radio). You don't need v-bind:value in this instance because your values are static (true and false).
So your code would become:
<div class='row both10'>
<div class='col-md-4 input-group'>
Reamortization Available:
</div>
<div class='col-md-3 input-group'>
Yes<input type='radio' name='financing[is_reamortizable]' value="true" v-model="financing.is_reamortizable" />
</div>
<div class='col-md-3 input-group'>
No<input type='radio' name='financing[is_reamortizable]' value="false" v-model="financing.is_reamortizable"/>
</div>
</div>
Related
I am trying to output the value of individual checkboxes and also add a class to the label when the checkbox is checked. I can do one of the other but not both together. If I add :value="attendance" the output works as individual instances but the adding of the class doesn't work and if I add value="attendance" then it treats the 2 checkboxes as one value.
Can someone help please?
<div class="container">
<div class="row">
<div class="col-sm">
<label
class="btn btn-outline-primary label-in-filter"
:class="{
showattendances:
showattendancesisChecked('attendance'),
}"
v-for="attendance in uniqueattendances"
:key="attendance"
>
<!-- <input
value="attendance"
id="attendance"
name="showattendances"
class="ck-in-filter"
type="checkbox"
v-model="attendances"
/> -->
<input
id="attendance"
name="showattendances"
class="ck-in-filter"
type="checkbox"
:value="attendance"
v-model="attendances"
/>
{{ attendance }}
</label>
</div>
<p v-for="attendance in attendances" :key="attendance">
{{ attendance }}
</p>
</div>
</div>
methods: {
showattendancesisChecked(value) {
return this.attendances.includes(value);
},}
Is it possible to do this after each input character?
The check works only if you click somewhere
password:
<div class='form-group' :class='{"form-group_invalid": errors.has("password") && errors.has("password:min")}'>
<input
v-validate='"required|min:8|confirmed:password_confirmation"'
type='password'
name='password'
v-model='user.password'
ref='password'
/>
<div class='form-group__error'>{{ errors.first('password') }}</div>
</div>
password confirm:
<div class='form-group' :class='{"form-group_invalid": errors.has("password:confirmed")}'>
<input
v-validate='"required|confirmed:password"'
type='password'
name='password_confirmation'
v-model='user.passwordConfirmation'
ref='password_confirmation'
/>
<div class='form-group__error'>{{ errors.firstByRule('password', 'confirmed') }}</div>
</div>
You can achieve this by adding an extra attribute:
data-vv-validate-on="blur"
or by changing it globally in your main.ts where you create the VeeValidate instance
Vue.use(VeeValidate, {
events: 'change|custom'
});
I have a form with two radio buttons which is enabled only when a checkbox is checked.
My problem is when I check the checkbox and click the submit button, the radio value is not getting posted. But after I click on the checkbox and then click on one of the radio buttons then the value is posted.
How to fix this issue?
This is the code I have tried:
HTML
<form [formGroup]="filterProductTargetForm" (ngSubmit)="onSubmitFilterDataList(filterProductTargetForm.value)">
<div class="row">
<div class="col-md-10">
<input type="checkbox" [ngModel]="isProductTypeChecked" formControlName="checkProductType" (change)="onProductTypeChange($event)" />
<label>Select A or B</label>
</div>
</div>
<div class="row">
<label class="col-md-2 uni-label"></label>
<div class="col-md-10 prduct-type-radio">
<fieldset [disabled]="!isProductTypeChecked">
<input type="radio" [checked]="isProductTypeChecked == true" value="A" formControlName="productTypeSelected" [(ngModel)]="productTypeSelected">
<span>B</span>
<br>
<input type="radio" value="B" formControlName="productTypeSelected" [(ngModel)]="productTypeSelected">
<span>B</span>
</fieldset>
</div>
</div>
<button class="uni-button def" [disabled]="!filterProductTargetForm.valid">OK</button>
</form>
TS
ngOnInit() {
this.filterProductTargetForm = this.formBuilder.group({
'checkProductType': '',
'productTypeSelected': ''
});
}
public filterProductTargetForm: FormGroup;
public isProductTypeChecked = false;
onProductTypeChange(event: any) {
this.isProductTypeChecked = !this.isProductTypeChecked;
if(!this.isProductTypeChecked)
this.filterProductTargetForm.controls['productTypeSelected'].reset();
}
First remove all ngModel from your template when using reactive forms.
When the checkbox value changes, in your onProductTypeChange function set the productTypeSelected value
this.filterProductTargetForm.controls['productTypeSelected'].setValue('A');
Working StackBlitz DEMO
I'm currently struggling while implementing a Spider for a Web Application, because my pages are not well structured at all. There're fields on the page, but sometimes they don't appear, and it's difficult to distinguish those because they only use class, not id as identifier. Is there a method to optimize the way we get the data in pages?
Below, an example of one page to crawl :
<div class = 'view-activity-field-wrapper even' style = 'display:none' >
<div class="view-activity-label">Status Notes <span><img src="/images/helpIcon.png" alt="" width="8" height="10" align="absmiddle" data-tooltip="stickyStatusNotes" /></span>
</div>
<div class="view-activity-field"></div>
</div>
<div style = 'clear:both'></div>
<div class = 'view-activity-field-wrapper odd' style = 'display:none' >
<div class="view-activity-label">Relevant Question <span><img src="/images/helpIcon.png" alt="" width="8" height="10" align="absmiddle" data-tooltip="stickyRelevantQuestion" /></span>
</div>
<div class="view-activity-field"></div>
</div>
<div style = 'clear:both'></div>
<!-- KEEP VALUE PROVIDED HERE -->
<div class = 'view-activity-field-wrapper odd' style = 'display:none' >
<div class="view-activity-label">Value Provided <span><img src="/images/helpIcon.png" alt="" width="8" height="10" align="absmiddle" data-tooltip="viewvalueprovided" /></span>
</div>
<div class="view-activity-field"></div>
</div>
<div style = 'clear:both'></div>
I have the following:
<ai-dialog>
<ai-dialog-header style="display:flex;justify-content:space-between">
<span>New Person</span>
<i class="fa fa-close" style="cursor:pointer" click.delegate="controller.cancel()"></i>
</ai-dialog-header>
<ai-dialog-body>
<div style="display:flex;flex-grow: 1">
<div class="field">
<div class="field-title">First Name</div>
<div class="field-value">
<input style="flex-grow:1" type="text" attach-focus="true" value.bind="criteria.firstName & validate" />
</div>
</div>
....
</div>
</ai-dialog-body>
<ai-dialog-footer>
...
</ai-dialog-footer>
When the dialog is displayed, I'm expecting first name input box to have focus but nothing has focus -- I manually have to click in the box to set focus.
Any thoughts?
Try the following: focus.bind="true"
<input style="flex-grow:1" type="text" focus.bind="true"...
You could also make the focus depending on the model what you didn't need here.
Here are more details:
http://aurelia.io/blog/2015/06/05/building-aurelias-focus-attribute/