• Register
0 votes
2.7k 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

Please log in or register to answer this question.

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.6K views
1.6K 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, 2020 mphil 2.3k points
1 vote
1 answer 736 views
736 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, 2020 stewart 4k points
0 votes
1 answer 40 views
40 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, 2020 Raphael Pacheco 4.9k points
0 votes
2 answers 316 views
316 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
0 votes
1 answer 67 views
67 views
Problem : I am facing below error when trying to launch my Angular app, even if my component is not displayed at all. &ldquo;Can't bind to 'ngmodel' since it isn't a known property of 'input'. ("&rdquo; How can I fix this issue?
asked Feb 19, 2020 mphil 2.3k points
0 votes
1 answer 51 views
51 views
Problem : I am facing below error if I try to export datagrid to the excel. &ldquo;Control 'gridview1' of type 'gridview' must be placed inside a form tag with runat=server.&rdquo; Please find below my code : <form runat="server" id="form1"> <div runat="server" id=" ... TextBox> </form> My GridView is within the from tag with the runat="server", but still I am facing above error. How to fix this?
asked Feb 17, 2020 mphil 2.3k points
0 votes
1 answer 125 views
125 views
Problem : I have upgraded my Angular 4 project using angular-seed but now facing following error please include either "browseranimationsmodule" or "noopanimationsmodule" in your application.
asked Nov 14, 2019 peterlaw 6.9k points
0 votes
2 answers 152 views
152 views
Problem : I am facing below error: Index and length must refer to a location within the string. Parameter name: length I am using below code: string s1 = ddlweek.Text.Substring(0, 8); string s3 = ddlweek.Text.Substring(10, 14); How can I resolve the error?
asked Dec 14, 2019 alecxe 7.5k points
0 votes
2 answers 102 views
102 views
Problem : I am using the reactjs. When I run my code below my browser says: Uncaught TypeError: Super expression must either be null or a function, not undefined Any clues at all as to what is wrong with my code? First the line used to compile the code as below : ... var React = require('react'); class HelloMessage extends React.Component {   render() {     return <div>Hello World</div>;   } }
asked Jan 23, 2020 jwilliam 3.9k points