I encountered an issue while attempting to implement a form in Angular based on a tutorial from the angular.io website. The error message I received is as follows:
compiler.js:26390 Uncaught Error: Cannot assign to a reference or variable! at _AstToIrVisitor.visitPropertyWrite (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:26611:23) at PropertyWrite.visit (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:4900:24) at convertActionBinding (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:26035:45) at eval (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28635:22) at Array.forEach () at ViewBuilder._createElementHandleEventFn (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28631:18) at nodes.(anonymous function) (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28050:27) at eval (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28576:22) at Array.map () at ViewBuilder._createNodeExpressions (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28575:56)
The modification I made was changing the attribute "name" to "username".
dashboard.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
username: string;
submitted = false;
constructor() {
}
ngOnInit() {
}
onSubmit() { this.submitted = true; }
}
dashboard.component.html
<div class="row justify-content-md-center">
<div class="col col-lg-12">
<form (ngSubmit)="onSubmit()" #usernameForm="ngForm" >
<div class="form-group">
<label for="username">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="username" name="name"
#username="ngModel">
<div [hidden]="username.valid || username.pristine"
class="alert alert-danger">
Name is required
</div>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
Can you identify the issue in the provided code snippet?