• Register
0 votes
2k views

Problem :

I am facing following error from the Angular 2

core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: Error in app/model_exposure_currencies/model_exposure_currencies.component.html:57:18 caused by: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

Example 1: <input [(ngModel)]="person.myfirstName" name="myfirst">
Example 2: <input [(ngModel)]="person.myfirstName" [ngModelOptions]="{standalone: true}">
<td *ngFor="let lag of ce.lags">
    <div class="form-group1">
        <input name="myname" [(ngModel)]="lag.myname" [ngModelOptions]="{standalone: true}"  class="form-control" pattern="[0-9]*(\.[0-9]+)?" required>
    </div>
</td>

Below is my form tag:

<form #f="ngForm" (ngSubmit)="onSubmit()">
6 5 3
7,540 points

1 Answer

0 votes

Solution :

Try following code to fix your issue...

<input type="text" class="form-control" name="myname" placeholder="Name"required minlength="4" #myname="ngModel" ngModel>
<div *ngIf="myname.errors && (myname.dirty || myname.touched)">
<div [hidden]="!myname.errors.required" class="alert alert-danger form-alert">
Please enter your name.
</div>
<div [hidden]="!myname.errors.minlength" class="alert alert-danger form-alert">
Enter name greater than four characters.
</div>
</div>

 

OR

 I simply added the name attribute for the select and checkbox and that fixed my issue. As shown below :

<mat-select placeholder="Select the option" name="Select" [(ngModel)]="sample.stat"> <!--HERE: please Observe the "name" attribute -->
<input id="Input" type="text" placeholder="Enter only number" aria-label="Number" matInput [formControl]="FormControl" required [(ngModel)]="number">  <!--HERE -->
<mat-checkbox name="Check" [(ngModel)]="isRight">Check!</mat-checkbox> <!--HERE: Please Observe the "name" attribute -->

As you can see I added the name attribute. It is not mandetory to be  same as your ngModel name. Just providing the correct name attribute will fix your issue.

9 7 4
38,600 points

Related questions

0 votes
1 answer 1.1K views
1.1K views
Problem : I am beginner in using Angular material. I am trying to use autocomplete component in the Angular2 project. Please find below the code written for my component. import {Component, OnInit} from "@angular/core"; import {ActivatedRoute, Router} from "@angular/router"; ... ; I am struggling with this issue from past 2 days but unable to resolve it. Can somebody help me in fixing this issue?
asked Feb 27 mphil 2.3k points
1 vote
1 answer 144 views
144 views
Problem : I am very new to Angular 4. Please find below my component in Angular 4: @Component( { selector: 'input-extra-field', template: ` <div class="form-group" [formGroup]="formGroup" > <switch [attr.title]="field.etiquette" [attr.value]="field.valeur" ... .../../../forms/@angular/forms.es5.js.FormControlDirective.ngOnChanges (forms.es5.js:4617) Please guide me in fixing above Angular 4 error.
asked May 11 stewart 4k points
0 votes
1 answer 18 views
18 views
Problem: I am trying to build my own form-field-Components at my Company. I am trying to wrap the material design's Components as shown below: My field as below: <mat-form-field> <ng-content></ng-content> <mat-hint align="start"><strong>{{hint}}</strong> ... not directly containing the matInput-field. Unable to fix above error from past four days so I need someone who can help me in fixing it.
asked Jul 10 Raphael Pacheco 4.9k points
0 votes
2 answers 145 views
145 views
Problem : Facing following strange error the value of the for attribute of the label element must be the id of a non-hidden form control.
asked Nov 12, 2019 peterlaw 6.9k points