I can't get this to give me the dd() of the date. It keeps coming back as null. i've implemented flatpickr correctly and all works accept when i try to get the actual date. However, when i add an additional button to submit the date with wire directive it works. But i want it to fire when a date is clicked. Any help would be appreciated. Thanks
in my livewire file.
public $date;
public function secondStepSubmit()
{ dd('date');
};
in my view
<input x-data x-init="flatpickr($refs.input, null);" wire:change="secondStepSubmit" x-ref="input" type="text" />
</div>
flatpickr has its own change event listener.
you can use that to get the value of the date of the input as follows.
<div>
<input x-data x-init="flatpickr($refs.input, {
onChange: function(dateObj, dateStr) {
#this.call('secondStepSubmit', dateStr)
}
});" x-ref="input" type="text" />
</div>
I have used #this blade directive from livewire, we also can use $wire from alpine too.
in the Livewire component,
public function secondStepSubmit($date)
{
dd($date);
}
Related
I am using a select2 component with wire:ignore and i want to update the select2 value dynamically after clicking a button. I set up this functionality with events and events work fine, so does the variable gets initialized as well. I am failing to update this public view of this select2.
my blade
<select class="select2-example form-control" id="subjects" wire:model.lazy="subjects" name="subjects">
</select>
#push('scripts')
<script>
$('#subjects').select2({
maximumSelectionLength: 1,
minimumInputLength:2,
tags: false,
placeholder: 'Enter Subject(s)',
.... // this all works great
});
$('#subjects').on('change', function (e) {
let data = $(this).val();
#this.set('subjects', data);
});
// my event listener and it is working as well
Livewire.on('editSubject', subject => {
console.log(subject);
#this.set('subjects', subject);
$('#subjects').val(subject);
$('#subjects').trigger('change'); //the public view doesn't get updated
})
</script>
#endpush
I so far tried with browser dispatch event as well. Nothing works. What would be the workaround for this? Any help is greatly appreciated.
in blade
<div class="col d-flex display-inline-block">
<label for="contact_devices">{{ __('Select Device') }}</label>
<select id="contact_devices" wire:model="selectedDevice" class="form-control contact_devices_multiple" multiple="multiple" data-placeholder="{{ __('Select') }}">
#foreach($devices as $device)
<option value="{{ $device->id }}">{{ $device->alias }}</option>
#endforeach
</select>
</div>
<script>
window.loadContactDeviceSelect2 = () => {
$('.contact_devices_multiple').select2({
// any other option
}).on('change',function () {
livewire.emitTo('tenant.contact-component','devicesSelect',$(this).val());
});
}
loadContactDeviceSelect2();
window.livewire.on('loadContactDeviceSelect2',()=>{
loadContactDeviceSelect2();
});
</script>
in component
public $selectedDevice;
protected $listeners = [
'devicesSelect'
];
public function devicesSelect($data)
{
dd($data);
$this->selectedDevice = $data;
}
public function hydrate()
{
$this->emit('loadContactDeviceSelect2');
}
Note: If some face the problem of real time validaiton while implementing the above mentioned solution as i have commented in the accepted answer above.
My Comments:
hey, I have implemented your solution its working great but there is
one problem, here is the scenario, I submit empty form and all the
validations gets triggered, when i start filling the form the error
starts to disappear but as soon as i change the select2 the validation
part $this-update($key, $value) function does not work. Can you please
tell me why real time validation is not working ? and how to fix it
please. thankyou – Wcan
Solution:
Use syncInput() function instead of assigning the value to country property. updated lifecycle hook will be trigerred automatically.
public function setCountry($countryValue)
{
// $this->country = $countryValue;
$this->syncInput('country', $countryValue);
}
I'm newbie in Laravel. I would like to pass parameter from view side to getFooAttribute method. Below is my needed method.
class Patient extends Model
{
public function getFooAttribute($paramfromview){
return SomeModel::find($paramfromview);
}
}
This is code from view side.
<div class="form-group">
<label>ID</label>
<input type="text" name="some" value="{{$somepatient->foo($someparameter)}}" class="form-control" >
</div>
I'm not sure is it possible to do that. Any advise or guidance would be greatly appreciated, Thanks.
I was playing around with aurelia-validatejs and was able to validate simple fields on a page. On the same page, I tried initializing a object and bind validation to that object and it stops working:
user_data:IUserData = {
Login:"",
Id : null,
UserProfile: {
UserId: null
},
Permissions: null
};
constructor(){
this.reporter = ValidationEngine.getValidationReporter(this.user_data);
// if I just use this and not user_data object,
// it works and error message is displayed in UI
this.validator = new Validator(this.user_data)
// when I use this.user_data (user_data object), it does validate
// and I can see validation result on console, but it's not shown in UI
.ensure('Login').required().length({minimum: 3, maximum:10});
this.observer = this.reporter.subscribe(result => {
console.info(result);
});
}
Someone mentioned that validatejs looks for a label, and I do have it, it worked when I initialize on this object but as soon as I want to validate on this.user_data property, it just doesn't display in UI, but I can see it on console.
<form action="" submit.delegate="createUser()">
<div class="input-group ${user_data.Login | loginClass}">
<label></label>
<input placeholder="Login" type="text" class="form-control"
keyup.delegate="validate()" value.bind="user_data.Login & validate">
</div>
</form>
this doesn't work, but if I clear user_data like:
user_data:IUserData = {
Login:"",
Id : null,
UserProfile: {
UserId: null
},
Permissions: null
};
constructor(){
this.reporter = ValidationEngine.getValidationReporter(this);
//if I just use this and not user_data object,
//it works and error message is displayed in UI
this.validator = new Validator(this)
.ensure('Login').required().length({minimum: 3, maximum:10});
this.observer = this.reporter.subscribe(result => {
console.info(result);
});
}
and
<form action="" submit.delegate="createUser()">
<div class="input-group ${user_data.Login | loginClass}">
<label></label>
<input placeholder="Login" type="text" class="form-control"
keyup.delegate="validate()" value.bind="Login & validate">
</div>
</form>
This works and is displayed in UI. I searched a little bit on stackoverflow and got few results similar (My problem is similar. I have error messages on UI if I don't use it on a object but when I try to use it on an object, it logs on console but it doesn't display in UI)
I also found this but it wasn't of much help.
I found one more which wasn't of much help either.
I understand there are a lot of articles which might make this question marked duplicate, the reason I'm asking is aurelia is quite new technology and stuffs are changing quite frequently.
Thanks in advanced!
So I dug around a little bit and asked developers in Gitter. As it turns out, it's a bug in validatejs plugin.
Recent changes were made to make something available on all classes, and when that change was done, validatejs looks for validationError Reporter on same model even if we provide different model.
A small hacky workaround is to have
this.__validationReporter__ = ValidationEngine
.getValidationReporter(this.user_data);
Instead of:
this.reporter = ValidationEngine.getValidationReporter(this.user_data);
I have reported this issue and will update once they come up with something.
For now I'm gonna use
this.__validationReporter__ = ValidationEngine
.getValidationReporter(this.user_data);
Or one other workaround is to downgrade to 0.3.x which is not very recommended as there might have been some important changes.
Have you used form-group? Usually our validation problems come down to HTML structure not conforming to the library.
<form action="" submit.delegate="createUser()">
<div class="form-group ${user_data.Login | loginClass}">
<label></label>
<input placeholder="Login" type="text" class="form-control"
keyup.delegate="validate()" value.bind="Login & validate">
</div>
</form>
I have a simple form that needs to validate if the beginning and the end of the input is not space.
In HTML5, I will do this:
<input type="text" pattern="^(?!\s|.*\s$).*$">
What is the right property for validation pattern in the new Angular 2 ngControl directive? The official Beta API is still lacking documentation on this issue.
Now, you don't need to use FormBuilder and all this complicated valiation angular stuff. I put more details from this (Angular 2.0.8 - 3march2016):
https://github.com/angular/angular/commit/38cb526
Example from repo :
<input [ngControl]="fullName" pattern="[a-zA-Z ]*">
I test it and it works :) - here is my code:
<form (ngSubmit)="onSubmit(room)" #roomForm='ngForm' >
...
<input
id='room-capacity'
type="text"
class="form-control"
[(ngModel)]='room.capacity'
ngControl="capacity"
required
pattern="[0-9]+"
#capacity='ngForm'>
Alternative approach (UPDATE June 2017)
Validation is ONLY on server side. If something is wrong then server return error code e.g HTTP 400 and following json object in response body (as example):
this.err = {
"capacity" : "too_small"
"filed_name" : "error_name",
"field2_name" : "other_error_name",
...
}
In html template I use separate tag (div/span/small etc.)
<input [(ngModel)]='room.capacity' ...>
<small *ngIf="err.capacity" ...>{{ translate(err.capacity) }}</small>
If in 'capacity' is error then tag with msg translation will be visible. This approach have following advantages:
it is very simple
avoid backend validation code duplication on frontend (for regexp validation this can either prevent or complicate ReDoS attacks)
control on way the error is shown (e.g. <small> tag)
backend return error_name which is easy to translate to proper language in frontend
Of course sometimes I make exception if validation is needed on frontend side (e.g. retypePassword field on registration is never send to server).
Since version 2.0.0-beta.8 (2016-03-02), Angular now includes a Validators.pattern regex validator.
See the CHANGELOG
You could build your form using FormBuilder as it let you more flexible way to configure form.
export class MyComp {
form: ControlGroup;
constructor(#Inject()fb: FormBuilder) {
this.form = fb.group({
foo: ['', MyValidators.regex(/^(?!\s|.*\s$).*$/)]
});
}
Then in your template :
<input type="text" ngControl="foo" />
<div *ngIf="!form.foo.valid">Please correct foo entry !</div>
You can also customize ng-invalid CSS class.
As there is actually no validators for regex, you have to write your own. It is a simple function that takes a control in input, and return null if valid or a StringMap if invalid.
export class MyValidators {
static regex(pattern: string): Function {
return (control: Control): {[key: string]: any} => {
return control.value.match(pattern) ? null : {pattern: true};
};
}
}
Hope that it help you.
custom validation step by step
Html template
<form [ngFormModel]="demoForm">
<input
name="NotAllowSpecialCharacters"
type="text"
#demo="ngForm"
[ngFormControl] ="demoForm.controls['spec']"
>
<div class='error' *ngIf="demo.control.touched">
<div *ngIf="demo.control.hasError('required')"> field is required.</div>
<div *ngIf="demo.control.hasError('invalidChar')">Special Characters are not Allowed</div>
</div>
</form>
Component App.ts
import {Control, ControlGroup, FormBuilder, Validators, NgForm, NgClass} from 'angular2/common';
import {CustomValidator} from '../../yourServices/validatorService';
under class
define
demoForm: ControlGroup;
constructor( #Inject(FormBuilder) private Fb: FormBuilder ) {
this.demoForm = Fb.group({
spec: new Control('', Validators.compose([Validators.required, CustomValidator.specialCharValidator])),
})
}
under {../../yourServices/validatorService.ts}
export class CustomValidator {
static specialCharValidator(control: Control): { [key: string]: any } {
if (control.value) {
if (!control.value.match(/[-!$%^&*()_+|~=`{}\[\]:";##'<>?,.\/]/)) {
return null;
}
else {
return { 'invalidChar': true };
}
}
}
}
My solution with Angular 4.0.1: Just showing the UI for required CVC input - where the CVC must be exactly 3 digits:
<form #paymentCardForm="ngForm">
...
<md-input-container align="start">
<input #cvc2="ngModel" mdInput type="text" id="cvc2" name="cvc2" minlength="3" maxlength="3" placeholder="CVC" [(ngModel)]="paymentCard.cvc2" [disabled]="isBusy" pattern="\d{3}" required />
<md-hint *ngIf="cvc2.errors && (cvc2.touched || submitted)" class="validation-result">
<span [hidden]="!cvc2.errors.required && cvc2.dirty">
CVC is required.
</span>
<span [hidden]="!cvc2.errors.minlength && !cvc2.errors.maxlength && !cvc2.errors.pattern">
CVC must be 3 numbers.
</span>
</md-hint>
</md-input-container>
...
<button type="submit" md-raised-button color="primary" (click)="confirm($event, paymentCardForm.value)" [disabled]="isBusy || !paymentCardForm.valid">Confirm</button>
</form>
Without make validation patterns, You can easily trim begin and end spaces using these modules.Try this.
https://www.npmjs.com/package/ngx-trim-directive
https://www.npmjs.com/package/ng2-trim-directive
Thank you.
I try to made nested form with validation. All works fine, but when I remove one of nested form, validation continue to use removed form. I made jsfiddle example http://jsfiddle.net/sokolov_stas/VAyXu/
When example runs, form are valid. If click "+" button, nested form will be added and valid will be false. Then click "-" button, and valid will be false all the same.
The question is: How to remove dynamic created form from validation processing.
Well, for one thing, a <form> inside of a <form> is not valid HTML.
Second, you're not supposed to be doing DOM manipulation from inside the controller. The controller is for "business" logic. See the section on controllers here
For what you're doing, you'd probably be better off using one form, with an ng-repeat inside of it, and adding additional elements to an array:
<form name="myForm" ng-controller="FormCtrl" ng-submit="doSomething()">
<div ng-repeat="item in items">
<input ng-model="item" type="text" required/>
</div>
<a ng-click="addItem()">+</a>
<a ng-click="removeItem()">-</a>
<button type="submit">Submit</button>
<div>Form valid: {{myForm.$valid}}</div>
</form>
and the controller:
function FormCtrl($scope) {
$scope.items = [];
$scope.addItem = function() {
$scope.items.push(null);
};
$scope.removeItem = function() {
$scope.items.pop();
};
$scope.doSomething = function () {
//your submission stuff goes here.
};
}