<form [formGroup]="objForm" (ngSubmit)="submit()">
<label formArrayName="orders" *ngFor="let order of getOrdersArray.controls; let i = index">
<input type="checkbox" [formControlName]="i">
{{ordersData[i].name}}
</label>
<button>submit</button>
</form>
This code works.
I want to understand since formGroup and formControlName are wrapped in [] (rectangular brackets), why is formArrayName not wrapped in []?
I didn't find any explanation in this page: https://angular.io/guide/reactive-forms
Please explain the reasoning behind that syntax.
Rectangular brackets in Angular are a type of "Binding Syntax". The attributes formGroup and formControlName are wrapped in brackets because they are binding to an expression that will be evaluated. In your example, formGroup is receiving the value of your objForm formGroup Object. fomrControlName will receive the value of the order currently pointed to by your index i in the *ngFor statement.
formArrayName is not being passed a variable expression that needs evaluation, instead you are providing it with a static value of "orders". Thus, the rectangular brackets are not necessary as no value binding is taking place.
For more information on Angular binding syntax, see Angular Binding Syntax.
Also another helpful post on this same topic
Related
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
I'm using ui-bootstrap-datetime-picker with angularJS. And i'd like to know if it's possible to set show-meridian options of time-picker directly inside timepickerOptions ?
...
<input type="text" class="form-control"
datetime-picker="MM/dd/yyyy HH:mm"
timepickerOptions="{'show-meridian': 'false'}"
ng-model="ctrl.date.value"
is-open="ctrl.date.showFlag"/>
<span class="input-group-btn"></span>
...
This is a plnkr which illustrate the problem.
Root cause of the problem is wrong naming style. To make your code work, you have to change camel-case to dash-delimited: timepicker-options instead of timepickerOptions (see my forked plunker):
<input type="text" class="form-control"
datetime-picker="MM/dd/yyyy HH:mm"
timepicker-options="{'show-meridian': false}"
ng-model="ctrl.date.value"
is-open="ctrl.date.showFlag"/>
The key point here is normalization process being done by AngularJS. Since HTML is case-insensitive, AngularJS cannot convert HTML attribute named timepickerOptions into scope variable timepickerOptions - because timepickerOptions in HTML is seen by AngularJS exactly like timepickeroptions; so, there is no chance for it to determine how to normalize this name. Thus, you should always use -, _ or : to delimiter different words in directive name when using HTML.
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.