Angular Material dual binding ngModel not working on input textarea and mat-slideRSS

• • Reply
  comicrage

  Member

  46 Points

  283 Posts

  Angular Material dual binding ngModel not working on input textarea and mat-slide

  Aug 06, 2019 04:25 PM|comicrage|LINK

  In my Angular Material app, I am using two controls which is textarea matInput and mat-slide-toggle. I followed the example online but somehow the ngModel is not working. For textarea I use ngModel, the data is not passed to the control. Only when I use [value] the data is posted on the control but any changes is not reflected back on the object. For the mat-side-toggle, [(ngModel)] does not work. I have to use [checked].

  How can I get dual binding working? thanks.

  <mat-card   >
                    <mat-card-content>
                  <div style="display:inline-block; ">  
                      <form class="full-form-wrapper">
  
                              <mat-form-field style="width:600px;">
  
                              <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" 
                                      cdkAutosizeMinRows="4"
  
                                      [formControl]="myCtrl"
                                      [readonly]="false"
                                      maxlength="300"
                                      id="description"
                                      cdkAutosizeMinRows="5"
                                      cdkAutosizeMaxRows="5" 
                                      width="500px"
                                      [value]="myObject.person.description"
                                      name="description">
                              </textarea>
                            </mat-form-field>
  
  
                            <section class="example-section">
                              <mat-slide-toggle
                              [(ngModel)]="checked"
                                [color]="primary"
  
                                [checked]="myObject.person.isActive"
                                [disabled]="false">
                                Is Active {{checked}}
                              </mat-slide-toggle>
                            </section> 
  
                      </form>
                    </div> 
                </mat-card-content>
              </mat-card> 

• • Reply
  Yongqing Yu

  Contributor

  3660 Points

  1042 Posts

  Re: Angular Material dual binding ngModel not working on input textarea and mat-slide

  Aug 08, 2019 06:04 AM|Yongqing Yu|LINK

  Hi comicrage,

  According to your description, I recommend you to use F12 tool to see if there are any error messages show.

  If so , please tell us about this.

  Best Regards,

  YongQing.

  MSDN Community Support
  
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  ifour.parth@...

  Member

  40 Points

  44 Posts

  Re: Angular Material dual binding ngModel not working on input textarea and mat-slide

  Nov 07, 2019 04:39 AM|ifour.parth@gmail.com|LINK

  Hello,

  ngModule lives in FormModule of @angular/form which can't with mat-slide and you are not use both ngModule and FormControl 

  As per yuor question first top you use F12 tool and inspect or debug your code.

  Blockchain software companies india
  http://www.ifourtechnolab.com/blockchain-technology