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

  • Question

  • User956626884 posted

    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> 
    Tuesday, August 6, 2019 4:25 PM

All replies

  • User665608656 posted

    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.

    Thursday, August 8, 2019 6:04 AM
  • User-857013053 posted

    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.

    Thursday, November 7, 2019 4:39 AM