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

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> 

Answer 1

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.

Answer 2

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.