I have this material input field where I would like to have a different placeholder When the user focuses the input.
When No Focus & No Value
When User Focuses it
When User Have some Value & Focuses it
Is there an event or work around in Material to achieve the same.
<mat-form-field class="example-full-width">
<input matInput #message maxlength="256" placeholder="Your Message Goes Here">
</mat-form-field>
You can accomplish this by passing a class variable to your placeholder property via property binding.
In your component create property variable with default value
myPlaceholder = 'Your Message Goes Here'
Assign variable to property [placeholder] and change to Message on mat-form-field click
<mat-form-field class="example-full-width" (click)="myPlaceholder = 'Message'">
<input matInput [placeholder]="myPlaceholder">
</mat-form-field>
Stackblitz
https://stackblitz.com/edit/angular-fsbbzr?embed=1&file=app/input-overview-example.ts
Related
Sorry am struggling to set default selected option in drop-down list when I open Dialog Model Form.
I have two model
department
employee
Also i have two component which is employee and employee-list, employee-list component is responsible for load all list of employee in a table and employee component is responsible to load singe employee..
In employee-list i set click event which call edit function and populate selected row in a form for editing purpose.. but when form opne it open with other filed by select option does not appear i do not know why.
employee.ts
dept: any;
ngOnInit() {
this.loadAllDept();
this.selected = this.employeeService.form.get('department').value;
}
loadAllDept(){
this.employeeService.getAllDepartments().subscribe(
data => {
this.dept = data;
}
);
}
And my employee.html
<mat-grid-tile>
<div class="reg-control-container">
<mat-form-field>
<mat-select [(value)]="selected" formControlName="depatment" placeholder="Class">
<mat-option>None</mat-option>
<ng-container>
<mat-option *ngFor="let d of dept" value="{{d.id}}"> {{ d.name }}</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
</div>
</mat-grid-tile>
but it does not set default value to a drop-down list.
Like the following picture show I can output both default selected and list of option but i can not set it.
as shown below
Take a look at this example, https://stackblitz.com/edit/angular-5short
Keep in mind that you need to bind the value of the option using the property binding syntax Angular provides, encasing the property you want to assign the value to in square brackets ([]). With that, as long as you pass the same value to the FormControl you want, it should apply the default option correctly.
I'm adding a checkbox in an MVC form with Tag Helpers:
<div class="form-group">
<label asp-for="#Model.Billable"></label>
<input asp-for="#Model.Billable" type="checkbox" />
<input asp-for="#Model.Billable" type="hidden" />
</div>
When the user changes the value to Checked from Unchecked, the form value passed back to the controller is True - perfect.
However, if the value of the checkbox starts as Checked and the user changes it to Unchecked, the form value passed back to the controller is still True???
When the type is checkbox, the input tag helper creates a hidden element for the checkbox for you with the same name. If you check the view source of the page, you can see that
<input name="Billable" type="hidden" value="false">
When user enable/check the checkbox and submit the form, it will send 2 form data item, one for the actual check box with value True and the second for the hidden input with value False.
If you inspect the network traffic (Chrome devtools->network), you can see this
Billable: true
Billable: false
When model binder uses this data, it will give precedence to the True value and map that to your boolean property.
When user uncheck the checkbox and submit the form, it will send only one form data element, just the one for the hidden input element with value false and model binder will set false value for your boolean proeprty of your action method parameter.
Your current code is generating the checkbox element and an additional hidden input element with the same name Billable. So basically it will render 2 input elements(1 checkbox,1 hidden element which the helper created and 1 you explicitly created). When user unchecks the checkbox, It will send True for your explicitly created one and false for the one created by the tag helper.
If you inspect the network traffic (Chrome devtools->network), you can see this
Billable: True
Billable: false
Model binder will use this information and map the value True to your Billable property of your view model.
The solution is to remove the extra hidden element and rely on the one created by tag helper.
<div class="form-group">
<label asp-for="#Model.Billable"></label>
<input asp-for="#Model.Billable" type="checkbox" />
</div>
I am using grails 2.1.1 I have a domain where I want to save religion of member. I am saving it there is no problem. But when I go to edit page then it does not checked the original value.Suppose I am saving a religion for Buddhist and at the time of edit I want to be checked the value of it. But it is checking for Muslim. I want the field to be checked on edit page. Can anyone please help me on this please ??!!! Here are my attempts below ::
my domain class >>>
class RadioButton {
String religion
static constraints = {
}
}
my form page >>>
<div class="fieldcontain ${hasErrors(bean: radioButtonInstance, field: 'religion', 'error')} ">
<label for="religion">
<g:message code="radioButton.religion.label" default="Religion"/>
</label>
<g:radio name="religion" value="muslim" checked="checked"/> Muslim <br/>
<g:radio name="religion" value="hindu"/> Hindu<br/>
<g:radio name="religion" value="christian"/> Christian<br/>
<g:radio name="religion" value="buddhist"/> Buddhist
</div>
You may want to consider the radioGroup tag within Grails instead of manually authoring your radio buttons.
However, if you decide to continue manually authoring your radio buttons you will need to account for selecting the current value. For example:
<g:radio name="religion" value="muslim" checked="${radioButtonInstance?.religion.equals('muslim')}"/>
In the above example you will notice that the checked attribute is being set to a boolean value (which is correct according to the documentation).
I think radioGroup is by far a better solution for you as you are using grails.
They main problem is that you are not passing the currently set religion to the GSP. There is nothing telling the radio group which religion has already been set by the user, instead Muslim has been hard-coded with the checked="checked".
Judging from your first line which sets the class of the div if the bean has an error, I assume you can access the currently set religion from the radioButtonInstance. Using the radioGroup tag you pass the currently set value as ${radioButtonInstance?.religion}, then we set the values and the labels you need, as shown:
<g:radioGroup name="religion"
values="['Muslim', 'Hindu', 'Christian', 'Buddhist']"
labels="['Muslim', 'Hindu', 'Christian', 'Buddhist']"
value="${radioButtonInstance?.religion}">
<p>${it.label}: ${it.radio}</p>
</g:radioGroup>
I would, however, suggest that you set the available religions as an enum class rather than hard coding it onto the GSP, as you might want to reuse it. You could then pass it as a variable in the model through the controller, calling it, for example, religions, then your radioGroup would look like:
<g:radioGroup name="religion"
values="${religions}"
labels="${religions}"
value="${radioButtonInstance?.religion}">
<p>${it.label}: ${it.radio}</p>
</g:radioGroup>
I have a site that searches through a db and pages the results. I want to make it so whenever there is a new search the page index defaults to 1. To do this I want to pass a flag when the submit button is pressed to tell the controller to modify the page index. I thought you might be able to pass the value with the onclick attribute but haven't had any success.
Here is my code for the search text box and submit button (without my failed attempt at using the onclick attribute).
Find: #Html.TextBox("SearchString", ViewBag.CurrentSearch as string)
<input type = "submit" value = "Search"/ >
this answer is supplied to address your original question in order to not require major refactoring (see final comment for my suggestion). so, use a hidden input as such:
Find: #Html.TextBox("SearchString", ViewBag.CurrentSearch as string)
<input type="hidden" name="lastSearchValue" ViewBag.LastSearch as string />
<input type = "submit" value = "Search"/ >
then, when you POST the form, check to see if the value of lastSearchValue and SearchString are the same, if so do what you need to do. if i understand your reasoning, then the final step would be to set ViewBag.LastSearch to the value of the last set ViewBag.CurrentSearch.
A better solution would be to use a SearchViewModel to encapsulate all of this logic in a self contained way. This gives the benefit of not having disparate logic spread across different concerns.
You could use a hidden input:
Find: #Html.TextBox("SearchString", ViewBag.CurrentSearch as string)
<input type="hidden" name="resetPageIndex" value="true" />
<input type = "submit" value = "Search"/ >
The input value will get sent with the form submission. You'll have to update the POST parameter accepted by your controller accordingly.
You can pass the flag as a hidden input on the form:
#Html.Hidden("FlagValue", Your_Flag_Value);
Find: #Html.TextBox("SearchString", ViewBag.CurrentSearch as string)
<input type = "submit" value = "Search"/ >
How can I set the value of a textbox to user entered value.
For ex
<input type = "text" name = "somename" value = "">
If the user enters "3" then it should become
<input type = "text" name = "somename" value = "3">
All I want is that when I process the textbox for value in a servlet, I should be able to get the value 3 for that textbox. well, there is more to it as David says. The textbox is part of a cart application and it denotes quantity of an item. What I want to do is to be able to take the value of any item and store it in the database. I will have a default value of 1 for every textbox. But when I POST the data, I want it to post the value entered by the user and not the default value
The value in the textbox is automatically transferred to the server when you submit the form as somename=3 (or whatever value).
However, if you want to actually update the value attribute of the element, you could use jQuery to do something like:
HTML
<input id="name" type="text" name="somename" value="">
jQuery
$('#name').change(function(){
$(this).attr('value',$(this).val());
});
Javascript
(untested, but might work if you don't want to use jQuery)
<input type="text" name="somename" value="" onchange="this.attributes['value'] = this.value;">