Как удалить все введенные символы на полях, когда я нажал на другую кнопку радио? Почти все мои полей имеют то же ngModel на другой странице

Вопрос задан: 8 месяцев назад Последняя активность: 8 месяцев назад
up 2 down

Как удалить все введенные символы на полях, когда я нажал на другую кнопку радио? Почти все мои полей имеют то же 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>

1 ответ

up 2 down accepted

Когда переключатель нажат, сброс 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