Question

当我单击另一个单选按钮时，如何清除字段中所有键入的字符？我的几乎所有字段在另一页上都具有相同的ngModel。当我在一个单选按钮上键入一个字段，然后单击另一个单选按钮时，我输入的字符仍然保留。

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

[[2]：https://i.stack.imgur.com/M81mh.png][2]

<div class="row text-center mt-3">
    <div class="col-sm-4 col-md-4 col-lg-4">
        <p-radioButton name="Members" [(ngModel)]="MemberOption" (click)="clear()" value="Team" label="Team/Academy"></p-radioButton>
    </div>

    <div class="col-sm-4 col-md-4 col-lg-4">
        <p-radioButton name="Members" [(ngModel)]="MemberOption" (click)="clear()" value="Company" label="Company"></p-radioButton>
    </div>
</div>

<div class="row mx-auto" id="MemOpt">
<div for="MemOpt" *ngIf="MemberOption === 'Team'">
    <div class="col-12">
        <div class="input-container mb-3">
            <label>* Team/Academy Name</label>
            <input name="name" #name="ngModel" id="TACName" type="text" [(ngModel)]="SignUp.Name" pInputText required/>
            <label *ngIf="!(name.pristine || name.valid)" style="color: red; font-size: 12px; margin-top: 0%"> *Team/Academy Name Required!</label>
        </div>
    </div>

    <div class="col-12">
        <div class="input-container">
            <label for="Address">* Address</label>
            <input name="address" #address="ngModel" id="Address" type="text" [(ngModel)]="SignUp.Address" pInputText required/>
            <label *ngIf="!(address.pristine || address.valid)" style="color: red; font-size: 12px; margin-top: 0%"> *Address Required!</label>
        </div>
    </div>
</div>

<div for="MemOpt" *ngIf="MemberOption === 'Company'">
    <div class="input-container mb-3">
        <div class="col-12">
            <label>* Company Name</label>
            <input name="name" #name="ngModel" id="TACName" type="text" [(ngModel)]="SignUp.Name" pInputText required/>
            <label *ngIf="!(name.pristine || name.valid)" style="color: red; font-size: 12px; margin-top: 0%"> *Company Name Required!</label>
        </div>
    </div>

    <div class="col-12">
        <div class="input-container">
            <label for="Address">* Address</label>
            <input name="address" #address="ngModel" id="Address" type="text" [(ngModel)]="SignUp.Address" pInputText required/>
            <label *ngIf="!(address.pristine || address.valid)" style="color: red; font-size: 12px; margin-top: 0%"> *Address Required!</label>
        </div>
    </div>
</div>

Answer 1

单击单选按钮时，通过将属性设置为空字符串来重置ngModel值。

组件类中的代码

clear() {
    this.SignUp = new SignUp();
}

HTML代码

<input type="radio" name="asdf" id="asdf" [(ngModel)]="MemberOption" value="Team" (click)="clear()"><label for="asdf">Team</label>
<input type="radio" name="asdf" id="asdf2" [(ngModel)]="MemberOption" value="Company" (click)="clear()"><label for="asdf2">Company</label>

下面是相同的工作示例。

StackBlitz

当我单击另一个单选按钮时，如何清除字段中所有键入的字符？我几乎所有字段在另一页上都具有相同的ngModel

1 个答案: