Question

在删除密码字段上的字符后，如何删除确认密码字段上的键入字符？当您在密码字段上放置一些字符时，您可以在确认密码字段上放置一些字符，但是当您清除密码字段中的字符时，确认密码上的字符将保留并禁用该字段。

<div class="col-12">
    <div class="row mb-3">
        <div class="col-sm-4 ">
            <div class="input-container">
                <label for="Password">* Password</label>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="input-container">
                <input name="password" id="Password" placeholder="Password" type="password" [(ngModel)]="SignUp.Password" pInputText required/>
                <br>
                <label for="Password" style="font-size: 15px"><i>At least 8 characters and must be a combination of letters and numbers.</i></label>
            </div>
        </div>
    </div>
</div>

<div class="col-12">
    <div class="row">
        <div class="col-sm-4">
            <div class="input-container">
                <label for="Confirm Password">* Confirm Password</label>
            </div>
        </div>
        <div class="col-sm-8 ">
            <div class="input-container">
                <input name="confirmpass" id="Confirm Password" [disabled]="!SignUp.Password" placeholder="Confirm Password" type="password" [(ngModel)]="SignUp.ConfirmPassword" pInputText required/>
            </div>
         </div>
     </div>
 </div>

[https://i.stack.imgur.com/hsDYI.png][1]

Answer 1

您可以使用(ngModelChange)="modelChanged($event)"之类的东西来帮助您监视模型值的变化。

<div class="col-12">
          <div class="row mb-3">
              <div class="col-sm-4 ">
                  <div class="input-container">
                      <label for="Password">* Password</label>
                  </div>
              </div>
              <div class="col-sm-8">
                  <div class="input-container">
                      <input name="password" id="Password" placeholder="Password" type="password" [(ngModel)]="SignUp.Password" pInputText required (ngModelChange)="SignUp.ConfirmPassword = null "/>
                      <br>
                      <label for="Password" style="font-size: 15px"><i>At least 8 characters and must be a combination of letters and numbers.</i></label>
                  </div>
              </div>
          </div>
      </div>

      <div class="col-12">
          <div class="row">
              <div class="col-sm-4">
                  <div class="input-container">
                      <label for="Confirm Password">* Confirm Password</label>
                  </div>
              </div>
              <div class="col-sm-8 ">
                  <div class="input-container">
                      <input name="confirmpass" id="Confirm Password" [disabled]="!SignUp.Password" placeholder="Confirm Password" type="password" [(ngModel)]="SignUp.ConfirmPassword" pInputText required/>
                  </div>
              </div>
          </div>
      </div>

Answer 2

如果要在模板中执行此操作，可以使用以下方法：

<div class="col-12">
          <div class="row mb-3">
              <div class="col-sm-4 ">
                  <div class="input-container">
                      <label for="Password">* Password</label>
                  </div>
              </div>
              <div class="col-sm-8">
                  <div class="input-container">
                      <input name="password" id="Password" placeholder="Password" type="password" [(ngModel)]="SignUp.Password" (ngModelChange)="SignUp.ConfirmPassword=$event ? SignUp.ConfirmPassword :''" pInputText required (ngModelChange)="SignUp.ConfirmPassword = null "/>
                      <br>
                      <label for="Password" style="font-size: 15px"><i>At least 8 characters and must be a combination of letters and numbers.</i></label>
                  </div>
              </div>
          </div>
      </div>

      <div class="col-12">
          <div class="row">
              <div class="col-sm-4">
                  <div class="input-container">
                      <label for="Confirm Password">* Confirm Password</label>
                  </div>
              </div>
              <div class="col-sm-8 ">
                  <div class="input-container">
                      <input name="confirmpass" id="Confirm Password" [disabled]="!SignUp.Password" placeholder="Confirm Password" type="password" [(ngModel)]="SignUp.ConfirmPassword" pInputText required/>
                  </div>
              </div>
          </div>
      </div>

在删除密码字符后如何删除确认密码中的键入字符？

2 个答案: