I use single reactive form as insert and update operation in both case radio button needed to be checked - how can I fix this issue?
Here is the field I use
<div class="form-group">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<input type="radio" formControlName="reportheader" id="reportheader0" [value]="0" (change)="isRhChanged()" [(ngModel)]="reportSettingData?.header_option"> According to present format
</div>
<div class="col-sm-6">
<input type="radio" formControlName="reportheader" id="reportheader1" [value]="1" (change)="isRhChanged()" [(ngModel)]="reportSettingData?.header_option"> Will use a customized header
</div>
</div>
</div>
</div>
</div>
Error:
Parser Error: The '?.' operator cannot be used in the assignment at column 34
For the default value to be checked, I use this code in the component:
this.rForm.patchValue({ reportheader: '0' });
Related
In the application, we used the input mask of jquery in one of the module.
In that module, there's a tab. whenever I tried to change the tab or submit it.
The value of tin is always null
Blade file
<div wire:ignore.self class="tab-pane active" class="tab-pane " id="vendor-customer-tab" role="tabpanel">
<div class="mb-3 row">
<label for="bank-account-number" class="col-md-3 col-form-label">TIN<span class="required">*</span></label>
<div class="col-md-9">
<!-- <input class="form-control tin-mask" type='text' id="tin_num" placeholder="Enter TIN Number" > -->
<input class="form-control tin-mask" type='text' id="tin_num" placeholder="Enter TIN Number" wire:model.defer="tin">
<!-- <input type="hidden" name="tin_num" wire:model.defer="tin"/> -->
#error('tin')
<span class="text-danger">
{{$message}}
</span>
#enderror
</div>
</div>
</div>
Script
<script type="text/javascript">
$(document).ready(function(){
$('.tin-mask').inputmask("999-999-999-999");
$(".tin-mask").val("000-000-000-000");
// $('#tin_num').change(function(e){
// var tin_number = $('#tin_num').val();
// $("input[name='tin_num']").val(tin_number);
// e.preventDefault();
// return false;
// });
// $(".tin-mask").attr("value", "000-000-000-000");
});
</script>
Question: Why everytime I tried to change the tab or submit, the value of TIN becomes blanks.?
Probably because
wire:model.defer="tin"
and
$(".tin-mask").val("000-000-000-000");
don't go hand-in-hand. jQuery sets the value, but wire:model also sets the value and so far $tin probably has no value.
I'm trying to get the selected image value and sent it to the database. Right now I can send only the input value to the database but I need that value to be the selected image. Basically I need to use v-model and :value at the same time, right now the input value is empty.
<img class="head" :src="head" v-if="head" #click="loadHead();">
<img class="body" :src="body" v-if="body" #click="loadBody();">
<img class="feet" :src="feet" v-if="feet" #click="loadFeet();">
<div class="row name justify-content-center">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label>Valitud pea:</label>
<input class="valikud" v-model="post.head"><b>Valitud pea: </b> {{head}}>
<pre>{{ head }}</pre>
<p class="valikud" v-if="body"><b>Valitud keha: </b> {{body}}</p>
<p class="valikud" v-if="feet"><b>Valitud jalad: </b> {{feet}}</p>
</div>
</div>
</div>
You can set a default data when your component is mounted.
mounted () {
if (this.post.head === '') {
this.post.head = this.head
}
}
How to put inline if in checked property on input in the vuejs?
this is my code
<div v-for="(element,index) in elements" :key="element.id" class="col">
<input type="radio" name="test[]" :value="element.id" :checked="if (index==0):'checked'">
</div>
Igot error message : avoid using JavaScript keyword as property name: "if"
Raw expression: :checked="if (index==0) 'checked'"
This is how to do:
<div v-for="(element,index) in elements" :key="element.id" class="col">
<input type="radio" name="test[]" :value="element.id" :checked="index===0 ? true: false">
</div>
In my vue 2.5.17 app I have a select input and text input and I have a create a validation rule that only 1 of them musdt be filled :
<div class="form-row p-3">
<label for="existing_user_list_id" class="col-12 col-sm-4 col-form-label">Select already existing list</label>
<div class="col-12 col-sm-8">
<v-select
v-model="selection_existing_user_list_id"
data-vv-name="selection_existing_user_list_id"
:options="userListsByUserIdArray"
v-validate="''"
id="existing_user_list_id"
name="existing_user_list_id"
class="form-control editable_field"
placeholder="Select existing user list"
v-on:input="onChangeSelectionExistingUserListId($event);"
></v-select>
<span v-show="vueErrorsList.has('existing_user_list_id')" class="text-danger">{{ vueErrorsList.first('existing_user_list_id') }}</span>
</div>
</div>
<div class="form-row p-1 m-1 ml-4">
<strong>OR</strong>
</div>
<div class="form-row p-2`">
<label for="new_user_list_title" class="col-12 col-sm-4 col-form-label">Create a new list</label>
<div class="col-12 col-sm-8">
<input class="form-control" value="" id="new_user_list_title" v-model="new_user_list_title" #change="onChangeBewUserListTitle($event);">
<span v-show="vueErrorsList.has('title')" class="text-danger">{{ vueErrorsList.first('title') }}</span>
</div>
</div>
I found this :
https://baianat.github.io/vee-validate/guide/custom-rules.html#creating-a-custom-rule
But I am confused how to use it in my case. I try :
import { Validator } from 'vee-validate';
Validator.extend('new_user_list_title', {
getMessage: field => 'The ' + field + ' value is not a valid new_user_list_title.',
validate: value => false // for simplicity I try to raise error always
// validate: value => value.length == 0 && selection_existing_user_list_id == null
})
But my custom error is never triggered, even when I set always false,
Which is right way ?
Thanks!
After adding custom rule, you need to use it in component (in v-validate):
<input
class="form-control"
id="new_user_list_title"
v-model="new_user_list_title"
#change="onChangeBewUserListTitle($event);"
v-validate="'new_user_list_title'">
I am working on an ASP.NET MVC 4 Project. I want to style data validation errors on my login page with Bootstrap 3.0. When I debug the page and it gives data validation errors, this codes are disappeared in source of my login form:
<form action="/Account/Login" class="col-md-4 col-md-offset-4 form-horizontal well" method="post"><input name="__RequestVerificationToken" type="hidden" value="Zbg4kEVwyQf87IWj_L4alhiHBIpoWRCJ9mRWXF6syGH4ehg9idjJCqRrQTMGjONnywMGJhMFmGCQWWvBbMdmGFSUPqXpx6XaS4YfpnbFm8U1" /><div class="validation-summary-errors"><ul><li>The user name or password provided is incorrect.</li>
</ul></div> <div class="form-group control-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="User name alanı gereklidir." id="UserName" name="UserName" placeholder="Kullanıcı Adı" type="text" value="" />
<span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">User name alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="Password alanı gereklidir." id="Password" name="Password" placeholder="Şifre" type="password" />
<span class="field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true">Password alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<button class="btn btn-default" type="submit">Giriş Yap</button>
</div>
</div>
</form>
How can I style these errors like "for=inputError" property of label with Bootstrap 3?
As it's shown in Bootstrap's docs, you need to apply class has-error to the div that contains the input and has class form-group:
<div class="form-group has-error">
...
</div>
It's a quite ugly to write a condition for each property you want to check and apply class has-error depending on the results of that condition, though you can do it like so:
<div class="form-group #(Html.ViewData.ModelState.IsValidField(Html.IdFor(x => x.UserName)) ? null : "has-error" )">
This takes care of the server side validation. However, there is also client side validation you need to think about. For that you'd need to write some jQuery that would check for existence of class field-validation-error and apply class has-error depending on the result.
You may do it all your self, though I suggest checking out TwitterBootstrapMVC which does all of that automatically for you. All you'd have to write is:
#Html.Bootstrap().FormGroup().TextBoxFor(m => m.UserName)
Disclaimer: I'm the author of TwitterBootstrapMVC. Using it in Bootstrap 2 is free. For Bootstrap 3 it requires a paid license.