How can I clear the value of my Angular 2 ng-if textarea so that it's not passed










0















Right now I have two textareas that appear conditionally through the *ngIf directive based upon the user selection entered earlier in a prior select box. It works great except the for the fact that if they go back and change the value of the select box the text areas switch accordingly but the previous value of the text area isn't erased it's just hidden from view.



I tried adding a function defined in my component binding to an onchange event to reset the value of the textbox hidden from view to an empty string but to no avail. The data is still persisting



<ss-multiselect-dropdown (onchange)=" resetdcn()" id="substatus" 
*ngIf="ddlCorrespondenceStatus == 'M'" class="report-multiselect"
[options]="ddlCorrespondenceSubStatuses"
[settings]="genericSearchMSDropdownSettings"
[texts]="statusMSDropdownTextSettings"
[(ngModel)]="selectedCorrespondenceSubStatuses"
(ngModelChange)="handleStatusSelection($event)">
</ss-multiselect-dropdown>


<ss-multiselect-dropdown (onchange)=" resetdcn()"
*ngIf="ddlCorrespondenceStatus == 'G'" class="report-multiselect"
[options]="ddlStatus"
[settings]="genericSearchMSDropdownSettings"
[texts]="statusMSDropdownTextSettings"
[(ngModel)]="selectedStatuses"
(ngModelChange)="handleStatusSelection($event)">
</ss-multiselect-dropdown>
</div>
</td>
<td>

<textarea (ngModelChange)="handleCorrespondenceDcnSelection($event)"
*ngIf="ddlCorrespondenceStatus == 'M'" id="txtDcn"name="txtDcn"
type="text"
placeholder="Correspondondence DCN " class="form-control input-md"
[(ngModel)]="txtCorrespondenceDcn"></textarea>


<textarea (ngModelChange)="handleClaimDcnSelection($event)"
*ngIf="ddlCorrespondenceStatus == 'G'" id="txtDcn" name="txtDcn"
type="text" placeholder="Claim DCN " class="form-control input-md"
[(ngModel)]="txtDcn"></textarea>









share|improve this question






















  • Are you saying that your checkbox is in a different component?

    – Zze
    Nov 12 '18 at 21:21






  • 1





    The <ss- multiselect> box in the code above is the what your referring to I believe. It changes which <text area> is shown

    – HappyProgrammingEveryone
    Nov 12 '18 at 21:27











  • if you used model driven reactive forms you'd be able to just disable the input

    – bryan60
    Nov 12 '18 at 21:43















0















Right now I have two textareas that appear conditionally through the *ngIf directive based upon the user selection entered earlier in a prior select box. It works great except the for the fact that if they go back and change the value of the select box the text areas switch accordingly but the previous value of the text area isn't erased it's just hidden from view.



I tried adding a function defined in my component binding to an onchange event to reset the value of the textbox hidden from view to an empty string but to no avail. The data is still persisting



<ss-multiselect-dropdown (onchange)=" resetdcn()" id="substatus" 
*ngIf="ddlCorrespondenceStatus == 'M'" class="report-multiselect"
[options]="ddlCorrespondenceSubStatuses"
[settings]="genericSearchMSDropdownSettings"
[texts]="statusMSDropdownTextSettings"
[(ngModel)]="selectedCorrespondenceSubStatuses"
(ngModelChange)="handleStatusSelection($event)">
</ss-multiselect-dropdown>


<ss-multiselect-dropdown (onchange)=" resetdcn()"
*ngIf="ddlCorrespondenceStatus == 'G'" class="report-multiselect"
[options]="ddlStatus"
[settings]="genericSearchMSDropdownSettings"
[texts]="statusMSDropdownTextSettings"
[(ngModel)]="selectedStatuses"
(ngModelChange)="handleStatusSelection($event)">
</ss-multiselect-dropdown>
</div>
</td>
<td>

<textarea (ngModelChange)="handleCorrespondenceDcnSelection($event)"
*ngIf="ddlCorrespondenceStatus == 'M'" id="txtDcn"name="txtDcn"
type="text"
placeholder="Correspondondence DCN " class="form-control input-md"
[(ngModel)]="txtCorrespondenceDcn"></textarea>


<textarea (ngModelChange)="handleClaimDcnSelection($event)"
*ngIf="ddlCorrespondenceStatus == 'G'" id="txtDcn" name="txtDcn"
type="text" placeholder="Claim DCN " class="form-control input-md"
[(ngModel)]="txtDcn"></textarea>









share|improve this question






















  • Are you saying that your checkbox is in a different component?

    – Zze
    Nov 12 '18 at 21:21






  • 1





    The <ss- multiselect> box in the code above is the what your referring to I believe. It changes which <text area> is shown

    – HappyProgrammingEveryone
    Nov 12 '18 at 21:27











  • if you used model driven reactive forms you'd be able to just disable the input

    – bryan60
    Nov 12 '18 at 21:43













0












0








0








Right now I have two textareas that appear conditionally through the *ngIf directive based upon the user selection entered earlier in a prior select box. It works great except the for the fact that if they go back and change the value of the select box the text areas switch accordingly but the previous value of the text area isn't erased it's just hidden from view.



I tried adding a function defined in my component binding to an onchange event to reset the value of the textbox hidden from view to an empty string but to no avail. The data is still persisting



<ss-multiselect-dropdown (onchange)=" resetdcn()" id="substatus" 
*ngIf="ddlCorrespondenceStatus == 'M'" class="report-multiselect"
[options]="ddlCorrespondenceSubStatuses"
[settings]="genericSearchMSDropdownSettings"
[texts]="statusMSDropdownTextSettings"
[(ngModel)]="selectedCorrespondenceSubStatuses"
(ngModelChange)="handleStatusSelection($event)">
</ss-multiselect-dropdown>


<ss-multiselect-dropdown (onchange)=" resetdcn()"
*ngIf="ddlCorrespondenceStatus == 'G'" class="report-multiselect"
[options]="ddlStatus"
[settings]="genericSearchMSDropdownSettings"
[texts]="statusMSDropdownTextSettings"
[(ngModel)]="selectedStatuses"
(ngModelChange)="handleStatusSelection($event)">
</ss-multiselect-dropdown>
</div>
</td>
<td>

<textarea (ngModelChange)="handleCorrespondenceDcnSelection($event)"
*ngIf="ddlCorrespondenceStatus == 'M'" id="txtDcn"name="txtDcn"
type="text"
placeholder="Correspondondence DCN " class="form-control input-md"
[(ngModel)]="txtCorrespondenceDcn"></textarea>


<textarea (ngModelChange)="handleClaimDcnSelection($event)"
*ngIf="ddlCorrespondenceStatus == 'G'" id="txtDcn" name="txtDcn"
type="text" placeholder="Claim DCN " class="form-control input-md"
[(ngModel)]="txtDcn"></textarea>









share|improve this question














Right now I have two textareas that appear conditionally through the *ngIf directive based upon the user selection entered earlier in a prior select box. It works great except the for the fact that if they go back and change the value of the select box the text areas switch accordingly but the previous value of the text area isn't erased it's just hidden from view.



I tried adding a function defined in my component binding to an onchange event to reset the value of the textbox hidden from view to an empty string but to no avail. The data is still persisting



<ss-multiselect-dropdown (onchange)=" resetdcn()" id="substatus" 
*ngIf="ddlCorrespondenceStatus == 'M'" class="report-multiselect"
[options]="ddlCorrespondenceSubStatuses"
[settings]="genericSearchMSDropdownSettings"
[texts]="statusMSDropdownTextSettings"
[(ngModel)]="selectedCorrespondenceSubStatuses"
(ngModelChange)="handleStatusSelection($event)">
</ss-multiselect-dropdown>


<ss-multiselect-dropdown (onchange)=" resetdcn()"
*ngIf="ddlCorrespondenceStatus == 'G'" class="report-multiselect"
[options]="ddlStatus"
[settings]="genericSearchMSDropdownSettings"
[texts]="statusMSDropdownTextSettings"
[(ngModel)]="selectedStatuses"
(ngModelChange)="handleStatusSelection($event)">
</ss-multiselect-dropdown>
</div>
</td>
<td>

<textarea (ngModelChange)="handleCorrespondenceDcnSelection($event)"
*ngIf="ddlCorrespondenceStatus == 'M'" id="txtDcn"name="txtDcn"
type="text"
placeholder="Correspondondence DCN " class="form-control input-md"
[(ngModel)]="txtCorrespondenceDcn"></textarea>


<textarea (ngModelChange)="handleClaimDcnSelection($event)"
*ngIf="ddlCorrespondenceStatus == 'G'" id="txtDcn" name="txtDcn"
type="text" placeholder="Claim DCN " class="form-control input-md"
[(ngModel)]="txtDcn"></textarea>






angular angular-ng-if data-persistence






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 12 '18 at 21:12









HappyProgrammingEveryoneHappyProgrammingEveryone

31




31












  • Are you saying that your checkbox is in a different component?

    – Zze
    Nov 12 '18 at 21:21






  • 1





    The <ss- multiselect> box in the code above is the what your referring to I believe. It changes which <text area> is shown

    – HappyProgrammingEveryone
    Nov 12 '18 at 21:27











  • if you used model driven reactive forms you'd be able to just disable the input

    – bryan60
    Nov 12 '18 at 21:43

















  • Are you saying that your checkbox is in a different component?

    – Zze
    Nov 12 '18 at 21:21






  • 1





    The <ss- multiselect> box in the code above is the what your referring to I believe. It changes which <text area> is shown

    – HappyProgrammingEveryone
    Nov 12 '18 at 21:27











  • if you used model driven reactive forms you'd be able to just disable the input

    – bryan60
    Nov 12 '18 at 21:43
















Are you saying that your checkbox is in a different component?

– Zze
Nov 12 '18 at 21:21





Are you saying that your checkbox is in a different component?

– Zze
Nov 12 '18 at 21:21




1




1





The <ss- multiselect> box in the code above is the what your referring to I believe. It changes which <text area> is shown

– HappyProgrammingEveryone
Nov 12 '18 at 21:27





The <ss- multiselect> box in the code above is the what your referring to I believe. It changes which <text area> is shown

– HappyProgrammingEveryone
Nov 12 '18 at 21:27













if you used model driven reactive forms you'd be able to just disable the input

– bryan60
Nov 12 '18 at 21:43





if you used model driven reactive forms you'd be able to just disable the input

– bryan60
Nov 12 '18 at 21:43












2 Answers
2






active

oldest

votes


















0














Inside resetdcn() just set the textarea model values to null. They are data bound so you don't have to do anything special outside of that.



public resetdcn()
// ...

this.txtCorrespondenceDcn = null;
this.txtDcn = null;






share|improve this answer






























    0














    The problem was that the function wasn't being called correctly, not the function itself. It needed to be (ngModelChange) ="resetdcn()"






    share|improve this answer






















      Your Answer






      StackExchange.ifUsing("editor", function ()
      StackExchange.using("externalEditor", function ()
      StackExchange.using("snippets", function ()
      StackExchange.snippets.init();
      );
      );
      , "code-snippets");

      StackExchange.ready(function()
      var channelOptions =
      tags: "".split(" "),
      id: "1"
      ;
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function()
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled)
      StackExchange.using("snippets", function()
      createEditor();
      );

      else
      createEditor();

      );

      function createEditor()
      StackExchange.prepareEditor(
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader:
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      ,
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      );



      );













      draft saved

      draft discarded


















      StackExchange.ready(
      function ()
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53270190%2fhow-can-i-clear-the-value-of-my-angular-2-ng-if-textarea-so-that-its-not-passed%23new-answer', 'question_page');

      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      0














      Inside resetdcn() just set the textarea model values to null. They are data bound so you don't have to do anything special outside of that.



      public resetdcn()
      // ...

      this.txtCorrespondenceDcn = null;
      this.txtDcn = null;






      share|improve this answer



























        0














        Inside resetdcn() just set the textarea model values to null. They are data bound so you don't have to do anything special outside of that.



        public resetdcn()
        // ...

        this.txtCorrespondenceDcn = null;
        this.txtDcn = null;






        share|improve this answer

























          0












          0








          0







          Inside resetdcn() just set the textarea model values to null. They are data bound so you don't have to do anything special outside of that.



          public resetdcn()
          // ...

          this.txtCorrespondenceDcn = null;
          this.txtDcn = null;






          share|improve this answer













          Inside resetdcn() just set the textarea model values to null. They are data bound so you don't have to do anything special outside of that.



          public resetdcn()
          // ...

          this.txtCorrespondenceDcn = null;
          this.txtDcn = null;







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 12 '18 at 21:30









          ZzeZze

          9,73053767




          9,73053767























              0














              The problem was that the function wasn't being called correctly, not the function itself. It needed to be (ngModelChange) ="resetdcn()"






              share|improve this answer



























                0














                The problem was that the function wasn't being called correctly, not the function itself. It needed to be (ngModelChange) ="resetdcn()"






                share|improve this answer

























                  0












                  0








                  0







                  The problem was that the function wasn't being called correctly, not the function itself. It needed to be (ngModelChange) ="resetdcn()"






                  share|improve this answer













                  The problem was that the function wasn't being called correctly, not the function itself. It needed to be (ngModelChange) ="resetdcn()"







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 15 '18 at 17:44









                  HappyProgrammingEveryoneHappyProgrammingEveryone

                  31




                  31



























                      draft saved

                      draft discarded
















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid


                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.

                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function ()
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53270190%2fhow-can-i-clear-the-value-of-my-angular-2-ng-if-textarea-so-that-its-not-passed%23new-answer', 'question_page');

                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Use pre created SQLite database for Android project in kotlin

                      Darth Vader #20

                      Ondo