09 October, 2022

Error: Cannot assign value "$event" to template variable "emailBody". Template variables are read-only.

 Error: Cannot assign value "$event" to template variable "emailBody". Template variables are read-only.


First of all, binding ngModel to your local variable X from.ts is not possible using #emailBody="ngModel."

A new template variable emailBody will be bound to the instance of the Angular directive ngModel, which has nothing to do with your.ts variable. The only place a template variable may be found is in your component's.html (unless you use @ViewChild or a similar method to retrieve a reference in your.ts).


Here is old cod that has this issue :

 <div class="ed_contact_form ed_toppadder60 row m-0">
        <div class="col-lg-6 col-md-6 col-sm-12">
          <div class="form-group">
            <input type="text" id="uname" class="form-control"
                    placeholder="Your Name">
          </div>
          <div class="form-group">
            <input type="email" id="fromEmail" class="form-control"
            placeholder="Your Email" name="fromEmail" #fromEmailt="ngModel"
                [(ngModel)]="fromEmail">
          </div>
          <div class="form-group">
            <input type="text" id="emailSubject" class="form-control"
            placeholder="emailSubject" required #emailSubject="ngModel"
            [ngModel]="emailSubject">
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12">
          <div class="form-group">
            <textarea id="emailBody" class="form-control" rows="6"
                placeholder="emailBody" required  #emailBody="ngModel"
                [(ngModel)]="emailBody"></textarea>
          </div>
         
        </div>


New Codde Ater Fixes 

your component variable name, and directive name should not be the same. 

to fix it I have added #emailBoddy instead of #emailBody.

<div class="ed_contact_form ed_toppadder60 row m-0">
  <div class="col-lg-6 col-md-6 col-sm-12">
    <div class="form-group">
      <input type="text" id="uname" class="form-control"
              placeholder="Your Name">
    </div>
    <div class="form-group">
      <input type="email" id="fromEmail" class="form-control"
      placeholder="Your Email" name="fromEmail" #fromEmailt1="ngModel"
          [(ngModel)]="fromEmail">
    </div>
    <div class="form-group">
      <input type="text" id="emailSubject" class="form-control"
      placeholder="emailSubject" required #emailSubject1="ngModel"
      [ngModel]="emailSubject">
    </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-12">
    <div class="form-group">
      <textarea id="emailBody" class="form-control" rows="6"
          placeholder="emailBody" required  #emailBody1="ngModel"
          [(ngModel)]="emailBody"></textarea>
    </div>
   
  </div>




No comments:

Post a Comment

Microservices vs Monolithic Architecture

 Microservices vs Monolithic Architecture Here’s a clear side-by-side comparison between Microservices and Monolithic architectures — fro...