I have a component in Angular with this HTML:
<div class="row">
<label for="tipo" class="column">Tipo: </label>
<div *ngFor="let tipo of tipos" class="column">
<input type="radio" name="tipo" [value]="tipo.id"
[(ngModel)]="movimiento.tipo" (ngModelChange)="alCambiarTipo()">
<span class="{{tipo.texto | lowercase}}">{{ tipo.texto }}</span>
</div>
</div>
It has two radio buttons, and on change it triggers a function in my component. In my test I want to check the second radio button to test that my function is called. I've tried this code but It's not working:
it('should call alCambiarTipo on radio button change', () => {
spyOn(component, 'alCambiarTipo').and.callThrough();
let options: DebugElement[] = fixture.debugElement.queryAll(By.css('input[type="radio"]'));
let secondOption: HTMLInputElement = options[1].nativeElement;
secondOption.checked = true;
expect(component.alCambiarTipo).toHaveBeenCalled();
});
I've also tried using .click() on the input and it's also not working. What can I do to trigger my function? Thanks.
PS: I've also tried to change the model adding component.movimiento.tipo = 1; and calling fixture.detectChanges() and it's also not working.
The answer from #maxisam is correct, additionally you could use:
inputElement.nativeElement.dispatchEvent(new Event('change'));
If you want more compact form :)
Because you use a wrong event. It should be change event.
options[1].triggerEventHandler('change', { target: options[1].nativeElement });
You don't even need to set check
Related
I have collection of permission_types which i can access in my view. I am looping the permission_types to show each one in check box. all the checkboxes are binded to permission_resource, which is defined as a public property array. I want all the checkboxes to be preselected for which i used checked attribute but it won't work, as soon as i remove the wire:model attribute from input all the checkboxes are preselected. which narrows down the problem to wire:model binding.
What i am trying to achieve:
All i want to do is preselect the checkboxes binded to public property $permission_resource. Can anyone please help me out. I really cannot figure out what am i doing wrong here. Appreciate any effort to solve this problem in advance.
Relevent Component Code:
public $permission_types;
public $permission_resource = [];
public function render()
{
$this->permission_types = PermissionType::all();
// dd($this->permission_types->toArray());
return view('livewire.permissions.create-permission-component')
->extends('layouts.app')
->section('content');
}
Relevant View Code:
<div class="row">
#foreach($this->permission_types as $permissionType)
<div class="col-md-3">
<input wire:model="permission_resource" type="checkbox" class="filled-in chk-col-green form-control" id="{{$permissionType['name']}}" value="{{ $permissionType['name'] }}" checked />
<label for="{{ $permissionType['name'] }}" class="p-r-30">{{ ucfirst($permissionType['name']) }} Resource</label>
</div>
#endforeach
</div>
Permission Types Dump
What i have tried so far:
so far i have tried following but none of it worked for me.
1: defining public $permission_resource; instead of public $permission_resource = [];
2: wire:model="permission_resource.{{$permissionType["id"]}}"
3: wire:model="permission_resource.{{$permissionType["name"]}}"
4: wire:model.defer="permission_resource.{{$permissionType["id"]}}"
5: wire:model.defer="permission_resource.{{$permissionType["name"]}}"
6: name="permission_resource.{{$permissionType["id"]}}"
You are binding all the inputs to the same (array) variable, what you want to do is bind each to an element in that array, not to the array itself.
So you would need to prepopulate that array, and then bind each input using $loop->index.
Not sure if you have a good reason for populating permission_types in the render method, better in mount if it is not highly dynamic (likely to change from render to render).
Populating permission_resource in mount might look like this:
public function mount() {
$this->permission_types = PermissionType::all();
$this->permission_resource = $this->permission_types->pluck('name');
}
Then in the blade, bind to elements of the array, and don't set checked yourself, wire:model will always override this anyway, checking your checkbox if the thing you have bound to is truthy, and unchecking if bound var is falsey (this is why everything is unchecked for you with the wire:model binding them to the array, because empty($array) == false, if you just fix the casing of permission_type in the blade you will find the checkbox all come on when you check one, because they are all bound to the same thing).
<input wire:model="permission_resource.{{$loop->index}}" type="checkbox" class="filled-in chk-col-green form-control" id="{{$permission_type['name']}}" value="{{$permission_type['name']}}" />
PS: That will at least get to what you wanted, depending on what you are ultimately trying to do with permission_resource, it may not be a very good/useful representation for the purpose.
try this
public $permission = [];
protected $rules = [
...
'permission' => 'required|array',
];
public function create()
{
if ($this->validate()) {
$data = [
'name' => $this->name,
....
];
$model = Model::create($data);
if (!empty($this->permission)) {
$permissionId = PermissionType::whereIn('id', $this->permission)->pluck('id');
$model->permission()->attach($permissionId); // add name relation instead 'permission' , of create 'attach' of update 'sync'
}
}
}
public function render()
{
return view('livewire.permissions.create-permission-component', [
'permissions' => PermissionType::select('id', 'name')->get()
])
->extends('layouts.app')
->section('content');
}
in View
<div class="row">
#foreach($permissions as $permission)
<div class="col-md-3">
<input wire:model.defer="permission" wire:key="permission{{$permission->id}}" type="checkbox" value="{{$permission->id}}" class="filled-in chk-col-green form-control" />
<label for="{{ $permission->name }}" class="p-r-30">{{ ucfirst($permission->name) }} Resource</label>
</div>
#endforeach
</div>
I am working in angular-9 , there are many things which works on reloading, but not after navigation. eg: there are two components A and B. and another component c have a reveal modal code(in foundation).
c component is to be included in both A and B.from component A through navigation I can move to component B which is a another page.
c.ts:
import { FormControl, Validators, FormBuilder,FormGroup, FormGroupDirective } from '#angular/forms';
loginFormControl:FormGroup;
ngOnInit() {
$('#loginModal').foundation();
this.loginFormControl = this.formBuilder.group({
phone_number: ''
});
}
c.html
<div class="reveal" id="loginModal" data-reveal>
<form class="loginForm" [formGroup]="loginFormControl"
(ngSubmit)="onSubmit()">
<input placeholder="Enter Mobile Number" formControlName="phone_number">
<button type="submit" class="button">LOGIN</button>
</form>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
If I open the modal 'c' in both of the pages A and B on a click of two buttons on both pages with $('#loginModal').foundation('open'); in A.ts and B.ts files, it results me with some unexpected behavior.
1. the modal is open in both the pages. no issue related to view
2. But events of that modal(click,change) or if I enter phone number, It doesn't accept it from user. Even there no event works in a page until i refresh or reload the page.
3. After refreshing a page it will work on that page (including all
events and inputs), there won't be any issue in that page after reloading. but as i navigate to another component B, then it's(c) events and input won't work until i refresh this page too. this same will happen again with component A.
I haven't reach at any solution of this till now and why is this happening. Please let me know if anyone have solution of my problem. It would be fruitful for me.
I have two div, have open the same modal window:
<div id="regulatorias" data-toggle="modal" data-target="#myModalReguOpor" data-alert="regulatorias">
Content...
</div>
<div id="oportunidades" data-toggle="modal" data-target="#myModalReguOpor" data-alert="oportunidades">
Content...
</div>
When invoking the event that opens the modal, I want to get the id atribute or the value of the data-alert, of the div which I am clicking.
$("#myModalReguOpor").on('shown.bs.modal', function () {
// here I want to get the id or data-alert value, about the div that i'm clicking
});
How could make it?
Thanks,
You can do like this
$(document).ready(function(){
$('#myModalReguOpor').on('shown.bs.modal', function (e) {
var id = $(e.relatedTarget).attr('id');
alert(id);
});
});
I would suggest to replace id with data-attribute like data-id="regulatorias" in modal trigger button
<div data-id="regulatorias" data-toggle="modal" data-target="#myModalReguOpor" data-alert="regulatorias">
Content...
</div>
and in JS
$(document).ready(function(){
$('#myModalReguOpor').on('shown.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
alert(id);
});
});
I have this wrapper around Ember.Select, to activate Select2 features:
App.Select2SelectView = Ember.Select.extend({
prompt: 'Please select...',
classNames: ['input-xlarge'],
didInsertElement: function() {
Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
},
processChildElements: function() {
this.$().select2({
// do here any configuration of the
// select2 component
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
},
willDestroyElement: function () {
this.$().select2('destroy');
}
});
Sometimes I need to make a drop-down invisible, and I do it like this:
{{#if cityVisible}}
<div class="control-group">
<label class="control-label">City</label>
<div class="controls">
{{view SettingsApp.Select2SelectView
id="city-id"
contentBinding="currentCities"
optionValuePath="content.city"
optionLabelPath="content.city"
selectionBinding="controller.selectedCity"
prompt="Select a city"}}
<i class="help-block">Select the city for your geographical number</i>
</div>
</div>
{{/if}}
But whenever the drop-down is invisible, I get the following error:
Uncaught TypeError: Cannot call method 'select2' of undefined
I guess the element is inserted, but then removed by Ember from the DOM (bound property cityVisible), so that jQuery is not able to find it?
What can I do to avoid that error message? I do not want to make the view visible/invisible, I want to keep the whole control-group under the cityVisible control.
This is normal behaviuor that ember removes the view, as a workaround you could do the following:
HTML
<div {{bindAttr class="view.cityVisible::hideCities"}}>
<div class="control-group">
...
</div>
</div>
CSS
.hideCities {
display: none;
}
Remove the {{#if}} around the html block, and wrap it with a div instead on which you set a css class which contains display: none; you could use the cityVisible or a different property in your view or controller and set it to true/false to toggle it's visibility. This mecanisnm should leave your html markup in the DOM an thus available for jQuery. Note that if your citiesVisible property lives in your controller then remove the view. prefix from view.citiesVisible to be only citiesVisible, this depends on your setup.
See demo here.
Hope it helps.
Given this chunk of HTML:
<div id="email_field" class="control-group">
<label class="control-label" for="account.email">Email</label>
<div id="email_input" class="controls">
<input id="account.email" name="account.email" type="text" placeholder="jpublic#example.com">
<span class="help-block">We just need a valid email address.</span>
</div>
</div>
How do I turn this into a re-usable partial for whatever attribute I want? IE: email, password, password confirmation, etc.
I would assume some sort of view hierarchy but I'm not quite sure.
EDIT: After further exploration I've knocked out {{view}} and {{render}} and figured out exactly what I need:
I want to:
1. Use a specific view (InputView)
2. Use a specific controller (Preferably similarly named: InputController) ({{view}} doesn't do this I think)
3. Be able to use this multiple times ({{render}} can't do this)
4. Be able to pass in values ({{render}} can't do this)
Example:
<!-- templates/application.hbs -->
{{foo "input" name="Email" id="account.email" placeholder="jpublic#email.com"}}
// controllers/input.js
Application.InputController = Ember.ObjectController.extend({
type: "text"
});
// views/input.js
Application.InputView = Ember.View.extend({
templateName: "form/input"
});
<!-- templates/form/input.hbs -->
<input {{bindAttr id="id" name="name" type="type" placeholder="placeholder"}}>
I would create a view that takes all the parameters that are variable. Such as:
{{view App.FormEntity
name="email"
placeholder="My placeholder..."
help="We just need a valid email address."
valueBinding="value"
}}
From there you could extract the label, the various class names, and then use Ember.TextField to bind the value to.
Once you have all of those arguments passed into the view, it should be nice and easy to create the markup using a mixture of bindAttrs, a couple of computed properties, and Ember helpers (such as the Ember.TextField).
I am new to Emberjs and looking for pretty much the same thing, but couldn't you also simply use http://emberjs.com/guides/templates/writing-helpers/ for that?
I will try it myself, so can give more updates if that works out.
Update:
Ok, I got it to work. I created a new Helpers folder with FormgeneratorHelper.js and the following code:
Ember.Handlebars.registerBoundHelper('control-group', function (options) {
var name = options.hash.test.capitalize();
console.log(name);
return new Handlebars.SafeString('<div class="control-group"> \
<label class="control-label" for="input' + name + '">' + name + '</label> \
<div class="controls"> \
<input type="text" id="input' + name + '" placeholder="' + name + '" /> \
</div> \
</div>');
});
An then, no matter in which template you can do:
{{control-group test="email"}}
I really like the idea of using helpers, but if you are using plain Javascript (as opposed to CoffeScript) and have more than one line of code, then it gets a bit ugly unfortunately. But will probably still use that method.
How do I turn this into a re-usable partial for whatever attribute I want? IE: email, password, password confirmation, etc.
What you want is the experimental {{control}} helper. The control helper is currently under development and is considered experimental. To enable it, set ENV.EXPERIMENTAL_CONTROL_HELPER = true before requiring Ember.
I want to:
1. Use a specific view (InputView)
2. Use a specific controller (Preferably similarly named: InputController) ({{view}} doesn't do this I think)
Out-of-box the control helper expects to be passed a template name. That template name is used to lookup a matching view and controller. So for example:
App.InputView = Ember.View.extend()
App.InputController = Ember.Controller.extend()
{{control input}}
See:
A control renders a template with a new instance of the named controller and view
A control's controller and view are lookuped up via template name
Be able to use this multiple times ({{render}} can't do this)
A control can be used multiple times
Be able to pass in values ({{render}} can't do this)
Like the {{view}} helper, {{control}} will accept arbitrary name/value pairs. So as in your example, one could manually pass options to the control helper. Like the {{view}} helper these options become properties on the view instance:
<!-- templates/form/input.hbs -->
<label class="control-label" {{bindAttr for="view.inputId"}}>
{{view.label}}
</label>
<div class="controls">
<input {{bindAttr id="view.inputId" name="view.name" type="type" placeholder="view.placeholder"}}>
<span class="help-block">{{view.help}}</span>
</div>
// controllers/form_input.js
App.FormInputController = Ember.ObjectController.extend({
type: "text"
});
// views/form_input.js
App.FormInputView = Ember.View.extend({
classNames: ["control-group"]
});
<!-- templates/application.hbs -->
{{control "form/input"
inputId="account.email"
name="email"
label="Email"
placeholder="jpublic#email.com"
help="We just need a valid email address."
}}
See this jsbin for working example
Also keep in mind that A control can specify a model to use in its template - with this in place we can bind properties to model data. Also if a controller's model changes, its child controllers are destroyed so the control will reset as expected if the model is swapped out.