<mat-form-field>
<mat-select [formControl]="form.controls['defaultCategory']" [(ngModel)]="resource.categoryName" >
<mat-option *ngFor="let category of categories | async" [value]="category._id" >
{{ category.name }}
</mat-option>
</mat-select>
</mat-form-field>
I tried many things. The docs, some bug-reports on github still not solve my Problem.
I only want do preset a default value...
The default value is stored a variable named: resource.categoryName. The options comes from a collection from mongodb and these are stored in categories[].
This picture shows the closed mat-select (no default value shown, but it should...)
opened mat-select
Here is my .ts. The important line is "this.resource.categoryName = this.subdoc['name'];". There i set the "resource.categoryName. If i try to console.log(this.resource.categoryName), then i get the name of the category...
Creating a variable in the .ts and be sure its a string. After that declare the variable with the ID of the default Category. (in my case it only worked with the ID, not with the simple name) - Thanks to Simeon, Hamid and other Threads about this problem.
I can't see your component file but the problem might be that your resource.categoryName doesn't have a value set on initialization of the component. Try setting it manually in your *.component.ts file.
Related
So I have a Ion-select with 3 static values and I would like for the 2nd one to be selected and displayed by default, doesn't sound to difficult or much of a problem right? Well so I tried simply adding selected near the ion-select option (displayed in the code below) just like they did with the example on the official document, but that for some reason had absolutely no effect and it is still not being displayed when I reload the page. Any idea on what could be the problem here?
<ion-item>
<ion-label>{{ "HOME.row_text" | translate }}</ion-label>
<ion-select [(ngModel)]="drive_option" (ionChange)="updateResult()">
<ion-select-option value=0.5>{{ "HOME.row_half" | translate }}</ion-select-option>
<ion-select-option value=1 selected>{{ "HOME.row_simple" | translate }}</ion-select-option>
<ion-select-option value=2>{{ "HOME.row_double" | translate }}</ion-select-option>
</ion-select>
</ion-item>
The matching between the model value and the dom value is type sensitive.
Vanilla dom properties are always strings and won't match the numeric drive_option. Try:
<ion-select-option [value]="0.5">{{ "HOME.row_half" | translate }}</ion-select-option>
It's because selected doesn't mean anything when you are using ngModel.
You need to set drive_option = 1 in the code and it will be reflected in the UI.
You probably don't need that (ionChange) either as any change will automatically update the drive_option value.
It would be helpful for you to go through the Angular documentation to understand how things work.
It was confusing for me too at the start (and still is regularly) but Ionic is not just about using Ionic, you need to take some time to get a core understand of Angular as well.
The concept is though that you are not building a traditional form, you are building a data model, and then letting angular two way bind that data - which is what the [()] means.
H e l l o!
I have several checkboxes that I bind with ngModel inside ngFor, but if my markup is wrapped in <form> tag UI works unexpectedly. For example
[checked]="team.original" and [disabled]="!group.internal" doesn't work line it should.
https://plnkr.co/edit/yxngdinXlHD1G9ITeGLT?p=preview
Thank you!
Edit:
For example do you see [checked]="team.original" and [disabled]="!group.internal" they don't work according to it's value. Also for 'Original' column I print actual value - 'false' but chackbox is checked.
In forms, names need to be unique. So now in your form, it's not evaluated as two different teams as the name attribute is the same. Here usually you use the index to differentiate the name in iteration, so:
*ngFor="let team of group['teams']; let i=index"
and the name attribute
name="read{{i}}"
You have one further issue, since the teams are in two different groups and each team has the index 0 in their separate array. So if using the above, you would end up with the same name attribute.
read{{i}} would end up to be read0 which still doesn't solve your issue, since it would be evaluated as one and the same form name. Therefore you need to use TWO indexes, both for the top level iteration and the nested iteration:
<div *ngFor="let group of groups; let j=index">
and
<tr *ngFor="let team of group['teams']; let i=index">
and mark your name attributes:
name="read{{j}}{{i}}"
NOW all items in your form have unique names, so the result of your form values would look like this:
{
"read00": true,
"download00": true,
"original00": false,
"read10": true,
"download10": true,
"original10": true,
"contribute10": true,
"manage10": false
}
This is just how forms work. All names must be unique.
Here's your forked Plunker
I'm using Laravel 4, and I have two tables related 'Many to many': 'Actividad' and 'Material'. Every Actividad can have one or more Materials, and every Material can belong to one or more Actividad.
So, I have made a form to create a new Actividad where you can save one or more Materials. I've done that with a multiselect input. Like that:
{{ Form::label('material_id', 'Material necesario:') }}
<p>{{ Form::select('material_id', $material_id, Input::old('material_id'), array('multiple')) }}</p>
I don't know if I'm doing correctly but, before saving anything, my first problem is that I'm only obtaining one result. I suppose I should get every option 'checked' in the form... The relevant part of my Controller is:
$material = Input::get('material_id');
return var_dump($material);
I should obtain a list of options selected, but the result of that in my browser is:
string(1) "1"
This is the first time I'm working with tables related in this way, and probably I'm doing something wrong (in the form, in my controller, in my Models,...)
Thank you very much for your help!!
Just change your code to this
{{ Form::select('material_id[]', $material_id, Input::old('material_id'), array('multiple')) }}
I hope this helps.
if you are using custom response handlers on the client side such in the case of submitting info with AJAX, all you need to do is to simple add "[]" to the name of the select control.
e.g.
<select name="material_id[]" multiple>
This is the same case as with regular PHP. The other methods are required if you want Laravel to handle the form elements for you when rendering a new response/view. ( page reload ). This reload doesn't happen with REST requests.
I am having trouble creating a property-dependent create/edit-view in KnockoutJS.
Here's the thing: everything I create are "People" of sorts - it could be a Healthcare Professional, Plumber, Mechanic or Engineer. Depending on what kind/type of person it is, I need to enter different data.
Here an example:
Healthcare Professional: Name, Telephone, Hospital, etc.
Plumber: Name, Telephone, Crafts, etc.
Engineer: Name, Telephone, Specialities, etc.
What I can do is create properties on my ViewModels such as "showCity", "showHospital" and so on to hide individual form-fields.
However, for the sake of separation, I would like to use entirely different forms: again, I could set the respective form to only show if the condition is met.
However, I would like KnockoutJS to only render the respective form that should be used (the Person's type is always determined when it is first created - it cannot be changed).
What I don't end-up doing is have one form that is shown and ten that are there (and data-bound) but hidden.
I tried using the "if" binding like so: <div data-bind="with: $root.selectedPerson"><form data-bind="if: $data.type='mathematician'"></form></div>, but to no avail.
Would anybody know what the best-practice is in this case?
Your if binding is setting the $data.type value, not comparing it. Try:
<div data-bind="with: $root.selectedPerson"><form data-bind="if: $data.type() === 'mathematician'"></form></div>
Although this is fine, I always try to avoid code in my data-binding markup. I would try and create a computed that would return the resulting true/false of the comparison, but in your situation, you would need one for each person type, and that would get tricky. For that, I would turn to templates. You could do:
<div data-bind="template: { name: $root.selectedPerson().type, data: $root.selectedPerson }"></div>
<script type="text/html" id="mathematician">...</script>
<script type="text/html" id="plumber">...</script>
*Note: As of KO version 2.3.0, the name property of the template binding can accept observables. If you're using a previous version, be sure to call the observable in the binding: name: $root.selectedPerson().type()
I have a form and inside it I have a country/city/etc selection.
The form is inside a zone.
When calling the onSelected for make the change of the country/city, when returning I loose the other form data. How can I keep it ?
I think a zone inside the form would help, but I am getting:
Form components may not be placed inside other Form components.
The Ubigeos type is just a component with other selects that are filled from the pais select
My .tml is
<t:zone t:id="datosPersonalesZone">
<form t:type="form" t:id="formulariodatospersonales" t:zone="datosPersonalesZone">
<t:errors/>
Sexo: <select t:type="Select" t:id="sexo" t:value="actual.sexo" model="sexo" />
País: <input t:type="Select" t:id="pais" model="paises" t:value="pais" t:zone="ubigeosZone"/>
<t:zone t:id="ubigeosZone">
<input t:type="Ubigeos" t:id="ubigeo_nacimiento" t:ubigeo="ubigeoNacimiento" t:zone="ubigeosZone"/>
</t:zone>
</form>
Regards !
You either have to submit a form and process country selection differently (i.e. only updating form contents by returning a block) or try using ideas from FormFragment component and TriggerFragment mixin (probably you can't use them directly but you can try extending them to support select components).
Personally, I go with first option - I have a "SubmitFormOnEvent" mixin and attach it to select-s in the form. Then I found that similar approach is demonstrated at http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/ajaxselect1 -> so you just can start with that example and update it to your needs.