Is it possible to have the select placeholder grayed out coherently with other Angular 2 MDL form fields?
This is what I can obtain with default settings:
<mdl-textfield type="text" label="CAP..." formControlName="postcode" floating-label></mdl-textfield><br>
<mdl-textfield type="text" label="Città ..." formControlName="city" floating-label></mdl-textfield><br>
<mdl-textfield type="text" label="Provincia..." formControlName="province" floating-label></mdl-textfield><br>
<mdl-select
placeholder="Nazione"
formControlName="countryid">
<mdl-option value="0"></mdl-option>
<mdl-option *ngFor="let country of countries" [value]="country.id">{{country.name}}</mdl-option>
</mdl-select>
The select placeholder "Nazione" appears in black. I'd like to have it grayed out just as the field "Cap...", "Città ...", "Provincia...".
mdl2-angular-ext 0.6.0 should have proper placeholders now. You example code is correct, but for anyone else visiting this question, here's the code (again):
<mdl-select
placeholder="Nazione"
formControlName="countryid">
<mdl-option value="0"></mdl-option>
<mdl-option *ngFor="let country of countries" [value]="country.id">{{country.name}}</mdl-option>
</mdl-select>
Unrelated to your question, but since it was discussed in the comments regarding the question, the floating-label property works now too.
<mdl-select floating-label
placeholder="Nazione"
formControlName="countryid">
<mdl-option value="0"></mdl-option>
<mdl-option *ngFor="let country of countries" [value]="country.id">{{country.name}}</mdl-option>
</mdl-select>
Related
I want to get the title called "ABCD" as output from below :
Note I can't use input id to search and have to use classname. Also, note that I have several <div class="promptChoiceListBox" > and class="promptTextField promptTextFieldReadOnly" exist and this is just one example.
Also this Title is dynamic and changed with dropdown selection.
How can I check it in onclick event if the text inside the text is changed?
How can I achieve this ? any help is appreciated.
<div class="promptChoiceListBox" >
<input id="xyz123" type="text" class="promptTextField promptTextFieldReadOnly" readonly="" title="ABCD">
I have tried below and it doesn't work:
console.log($('.promptTextField').attr('title'));
thanks
Javascript way of doing it:
console.log(document.getElementById("xyz123").title);
JQuery (on-click example):
$("input:promptTextField promptTextFieldReadOnly").click(function(){
$("input:promptTextField promptTextFieldReadOnly").toggle();
});
$('.promptTextField').map(x=>x.title)
I have a form that spans multiple tabs in a TabStrip control. However, when the form is validated (e.g. f.valid), not all controls are considered when the validation is evaluated.
For example, if an input field is on tab 1 that is marked as "required" and the save action is called when the focus is on tab #3, the form will read as invalid since the required field is not in view. If the focus is on Tab #1, all works as expected.
I understand why this behavior is occurring, but I wanted to see if there was any suggested workaround.
Thanks!
Update
I created a plunkr that shows the basic issue. It is actually a little backwards from the problem I described, but it shows how the form ignores the fields on tabs other than the one displayed during validation: Plunkr Example
The template code looks like this:
<form #f="ngForm" (ngSubmit)="save(f)">
<kendo-tabstrip>
<kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
<ng-template kendoTabContent>
<input type="text" name="controlOne" id="controlOne" [(ngModel)]="myModel.controlOne" required>
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'New York City'">
<ng-template kendoTabContent>
<input type="text" name="controlTwo" id="controlTwo" [(ngModel)]="myModel.controlTwo">
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'Tallinn'">
<ng-template kendoTabContent>
<input type="text" name="controlThree" id="controlThree" [(ngModel)]="myModel.controlThree">
</ng-template>
</kendo-tabstrip-tab>
</kendo-tabstrip>
<button type="submit">Save changes</button>
</form>
<div>
Valid when saving: {{ isValid }}
</div>
I have this code
<label>
<input type="radio" checked="checked" value="fOejPdlZIx83HA" name="btnRad">
Test1
</label>
<label>
<input type="radio" checked="checked" value="fdsaf4waff4sssd" name="btnRad">
Test2
</label>
<label>
<input type="radio" checked="checked" value="fg43fasd43wsat4" name="btnRad">
Test3
</label>
I wish to access the radio button depending on the label text via xpath
I already tried multiple thing:
//input[#name='btnRad]']/following::*[contains(text(),'Test3')]
//label[text()='Test3']/input[#name='btnRad']
//*[contains(text(),'Test3')]
Even the last one return me nothing, so xpath think that "Test3" is not the text of the label... anyone have an idea how to do this?
Your expression is failing because your label has more that one text node: an empty string before the input, and Test3. The way you're using contains means it will only check the first text node, ie empty string.
Two ways of solving this:
eliminating the empty strings with normalize-space():
//*[contains(text()[normalize-space()], 'Test3')]
querying each text():
//*[text()[contains(.,'Test3')]]
For a more detailed explanation, see How to search for content in XPath in multiline text using Python?.
This works also //label[contains(.,'Test3')]/input .
I have two input fields
input(ng-model='form.firstName', name='firstName', id='familyName')
and
input(ng-model='form.lastName', name='lastName')
I also have a textarea field
textarea(id='fieldInfo', ng-model='fieldInfo', name='fieldInfo' cols='15', rows='10')
I would like to change the text in the TextArea to "Please enter your first name" when the focus or cursor is in the First Name input and change it to "Please enter your last name" when the is on the last name inout and it should be able to toggle as the user switches focus from first name to last name and last name to first name.
Any assistance will be much appreciated.
Melroy
The ng-focus directive will not work for you if you are using one of the stable 1.0.x versions of AngularJS. However, I have created a working CodePen example of how you could do it without the ng-focus directive.
I created my own on-focus directive that evaluates an expression, which results in an update to the scope model being used by the textarea. I'm sure it could use some refinement, but the concept should still work for your application.
You can use the ngFocus directive if you are using angular 1.2.0.
In your controller:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.text = "";
}]);
And in your view:
<input type="text" data-ng-model="form.name" ng-focus="text = 'Please enter your first name'" />
<input type="text" data-ng-model="form.last" ng-focus="text = 'Please enter your last name'" />
<textarea name="area" id="textarea" cols="30" rows="10"> {{ text }} </textarea>
You can check this fiddle
Edit: Wrong fiddle link
Is it possible to have an author dropdown select field in a SafeCracker form, in a similar way to how you can have a Status dropdown select field with the following code?
{status_menu}
<label for="status">Status</label>
<select name="status" id="status">
{select_options}
</select>
{/status_menu}
I've searched the docs and EE forums but can't find anything, but hoping there's a way of doing this.
Thanks for any help,
Ste
Edit:
Thanks to Tyssen's reply below, I've just implemented this solution in a SafeCracker form and it works great. Just one note though - the name should be author_id rather than author. Here's my final code, including a conditional to show the entry's current author:
<label>Author</label>
<select name="author_id">
{exp:query sql="SELECT member_id, screen_name, group_id FROM exp_members ORDER BY screen_name ASC;"}
<option value="{member_id}" {if "{member_id}" == "{author_id}"}selected="selected"{/if}>{screen_name}</option>
{/exp:query}
</select>
Use the query module maybe?
<select name="author">
{exp:query sql="SELECT member_id, screen_name
FROM exp_members
WHERE group_id = X;"
}
<option value="{member_id}">{screen_name}</option>
{/exp:query}