Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name. angular 4

I am getting the following error:

Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name.

I simply made model:

export interface ModalComponentModel {
    username: string;
    password: string;
    password2: string;
    description: string;
}

I used it in my component:

component:

model: ModalComponentModel;

Then I tried to use it in my html file:

    <div class="modal-header">
	<h4 class="modal-title text-center">Edit Profile</h4>
	<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
		<span aria-hidden="true">&times;</span>
	</button>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-2 col-md-offset-2">
            <form class="form" role="form" (ngSubmit)="whatDoesThisFormDo()">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" class="form-control" name="username" id="username" placeholder="Your username"
                           [(ngModel)]="model.username">
                </div>
                <div class="form-group">
                    <label for="password1">Password</label>
                    <input type="password" class="form-control" name="password1" id="password1" placeholder="Your password"
                           [(ngModel)]="model.password">
                </div>
                <div class="form-group">
                    <label for="password2">Confirm Password</label>
                    <input type="password" class="form-control" name="password2" id="password2" placeholder="Your password"
                           [(ngModel)]="model.password2">
                </div>
				<div class="form-group">
					<textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"]></textarea>
				</div>
				<div class="row">
					<div class="col-xs-1">
						<button value="update" type="button" class="btn btn-primary pull-left">Update</button>
					</div>
					<div class="col-xs-1">
						<button value="cancel" type="button" class="btn btn-primary pull-left">Cancel</button>
						<div class="clear"></div>
					</div>
				</div>
				
			</form>
        </div>
    </div>
</div>
<div class="modal-footer">
	<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

It was working fine until I added to model, full HTML is above as requested.

I am also not able to get the buttons correctly side by side.

[(ngModel)]="model.description"] // ']' is added unnecessarily

change it to

[(ngModel)]="model.description"

Don't wrap it to a square bracket.

Update:

You can initialize your model variable as follow according to your need,

model:ModalComponentModel=<ModalComponentModel>{};

OR

model:ModalComponentModel=<ModalComponentModel>[];

Problem is in this line

Change

From

  <textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"]></textarea>

to

  <textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"></textarea>

You have problem in this line of code:

<textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"]></textarea>
               

It should be:

<textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"></textarea>
              

There is an extra bracket that is causing this error.

In my case I had a 0 inserted in a table element's attributes list. So the dom was trying to treat 0 as an attribute of table. Removing it fixed the issue. Two people spent 3 hours searching for the bug.

<table style="width:100%" 0>

In my case it was <app-some-component []></app-some-component>. The empty [] was causing the issue.

Having a comma in the wrong place also results in this issue:

<span>
[(ngModel)]="item",
(click)="onClick()"
</span>

I've gotten this error from a typo when trying to add an attribute to a directives host.

@Directive({
  ...
  host: {    
    '[style.touchAction' <-- missing closing bracket : '"none"',
  }
})

In my case, I didn't close ] in ngModel. I used the below wrong code.

[(ngModel)="selectedTestName"

Correct Syntax:

[(ngModel)]="selectedTestName"

ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '[' is not a valid attribute name.

For this error is generate by many thing but i was get is in 2 case

1. If your tag is not close in one line of [ src]=""

in upper html i did not close src [ in same line so i showing error 2. if you are not close [src] proper close .

I faced this issue because [ and attributeName are not on the same line. My manual formatting sent the attribute name on the next line. That is the reason for the test case failure.

Just make sure your [attributeName]="value" should on the same line to fix this issue.

Don't add any unuseful letters, brackets, commas, or any other thing, You will face the same issue.

example:

<h1 *ngIf="check" ,><h1>

In my case the , will give the same error