I'm developing a web application using Angular 6. if I create a custom component that simulates the HTML <select>, I can not make it have a default value when it is referenced by another component!
You can find the (simple) application code at the following link: stackblitz here
In this question
I asked how to set a default value when the ngModel is present (
the selected attribute of <option> doesn't work anymore!).
As you can see my input-select custom component
initialize value (value linked to the ngModel).
value: any = 'default';
Unfortunately, however, the component is displayed like this:
As you can see the console, at the press of submit, print this:
I would like this situation not to show up: I would like a combo box with a pre-selected value. I can't understand what I was wrong with this application.
You had used ngModel but did not bind with anything so Angular doesn't know what value it supposed to bind with. You should bind ngModel with property which contains the default value.
<form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
<input-select
name="name"
[options]="my_options"
[(ngModel)]="value"
></input-select>
<input type="submit" value="Submit"/>
</form>
Working copy is here - https://stackblitz.com/edit/angular-qanpuu
Related
I have the following code:
<input type="checkbox" [(ngModel)]="i.checkt" [ngModelOptions]=
{standalone:true} (change)="recovery(i.checkt,i.TherapeuticArea)">
{{i.TherapeuticArea}}
The problem I am facing is that with standalone:true every checkbox is checked by default and when standalone is false, the checkbox isn't working. Is there any way of setting the checkbox value to unchecked while having full functionality for the user?
You need to set the checked attribute on the input like the following:
<input type="checkbox" [(ngModel)]="i.checkt" [ngModelOptions]={standalone:true}
(change)="recovery(i.checkt,i.TherapeuticArea)" [checked]="i.checkt">
But I would recommend #Florian's comment of using a FormControl to manage inputs from the UI. It will save you a lot of time and makes it easier to maintain in my opinion.
I am starting with my angular6 and I come across the syntax below.
<input type="text"
class="form-control"
name="company-name"
ngModel
#nameField="ngModel"
required
minlength="3">
now my question is if ngModel and name is already there to uniquely identify form component and ngModel directive to bind it with angular form why we need #nameField="ngModel"?
We can have input value from name="company-name". so why 2 NgModels?
and what is the difference between #nameField="ngModel" and [(ngModel)]="nameField"?
To create a valid template-driven form control - you only have to add name="company-name" and ngModel.
The template reference #nameField="ngModel" can be used as a variable in your html (so it's optional).
[(ngModel)]="nameField" is the two-way data binding in Angular, aka "banana-box" (for more detailed explanation read this article two-way-data-binding-in-angular-2 or the official documentation NgModel )
I always thought it is also needed for validation purposes so the error message show up nicely below the control.
I am not able to see the initial value of inputTextt when I use name attribute. I have to use ngModel in order to get the value from typeScript and send it by webservice and when I use without name attribute in inputText I come across with lots of html errors.
When I use name and ngModel at same time as you will see in the snippet below , I can not see the initial value of inputText such like 1. could you please enlighten me where I am doing wrong ?
<input type="text" value="1" [(ngModel)]="guiTranformatorInput.VSAT_input1" name="input1">
I have a form like this
<form name="myForm">
<input name="myEmail" type="email"/>
{{myForm.$invalid}}
</form>
I need to bind my input field with ng-model to validate correctly the form. Why AngularJs is unable to validate this form just like this?
Even, the property myForm.myEmail.$invalid only exist if I bind the input with ng-model. Why is this so?
If validation only exist with ngModel directive, why angularjs give me the value myForm.$invalid to false? a better response would not be undefined?
Why AngularJs is unable to validate this form just like this?
Because validation makes sense only in context of ngModel directive, as this is what actually allows validation capabilities by registering corresponding model controller (ngModelController) with parent form directive controller, which orchestrates validation functionality.
Check the source to see how input directives are implemented and what they do with ngModel controller: https://github.com/angular/angular.js/blob/71cf28cf06295e0936f706c048bc07e6c963acc4/src/ng/directive/input.js#L1708
Because angular validates the model, not the html. If you don't bind to a model, then, as far as angular is concerned, there's nothing to validate.
I am using jstl with dropdown lists.
When i click submit button i success the specification but values int dropdownlists are reinitialized.
So I want to submit form without loosing the values already selected in the form because I need to stay always at the same level in the form.To be more clear, user choose a value from ddl and click edit button to show other options and fill them at the same form without loosing what he has selected.
I have tried to deal like that...
<form action="myjsp.jsp" method="post">
<input type="Submit" value="Edit">
...but it doesn't work.
Thank you for your help.
You need to preset the inputs with the request parameter values. You can access parameter values in EL by ${param.name}. Basically:
<input type="text" name="foo" value="${param.foo}">
Note that this is XSS sensitive. You always need to sanitize the user inputs. You can use the JSTL functions taglib for this.
<input type="text" name="foo" value="${fn:escapeXml(param.foo)}">
In case of dropdowns rendered by HTML <select> element, it's a bit trickier. You need to set the selected attribute of the HTML <option> element in question. You can make use of the ternary operator in EL to print the selected attribute whenever the option value matches the request parameter value.
Basic example:
<select name="foo">
<c:forEach items="${options}" var="option">
<option ${param.foo == option ? 'selected' : ''}>${option}</option>
</c:forEach>
</select>