En esto, muestro el resultado debajo del campo de entrada después de hacer clic en el botón escanear. Ahora necesito borrar el resultado cuando borre el dominioUrl (que está en el campo de entrada).
aplicación.componente.html:
<div class="d-flex justify-content-center align-items-center vh-100"> <div class="row col-md-4"> <div class="d-flex justify-content-center mt-n5"> <a href="https://logo.ai/" target="_blank"><img src="./assets/image/logo.png"></a> </div> <div class="input-group d-flex align-items-baseline"> <p class="col-12 mb-0 pb-2">loreum ipsum....<a href="link" target="_blank">loreum</a> ipsum</p> <input type="url" class="form-control pt-1" id="validationCustomUsername" placeholder="Enter your Target Url" [(ngModel)]="domainUrl" aria-describedby="inputGroupPrepend" (change)="inputChanged=true" > <div class="input-group-prepend m-0"> <button type="submit" class="btn btn-primary " (click)="scanDomain()" [disabled]="(isLoading || ((!domainUrl || !domainUrl.length) && !inputChanged) || (isLoading && !inputChanged)) ">{{submitBtntext}} <i *ngIf="isLoading" class="fa fa-spinner fa-pulse fa-x"></i> </button> </div> </div> <span *ngIf="this.result" class="pt-2 mt-2">{{ this.result.result}}</span> </div> </div>Gracias.
Puede introducir un nuevo método onChange que se invoca en el evento keyup y borra la variable this.result cuando this.domainUrl está empty o es null .
Su marcado se vería de la siguiente manera:
<input type="url" class="form-control pt-1" id="validationCustomUsername" placeholder="Enter your Target Url" [(ngModel)]="domainUrl" aria-describedby="inputGroupPrepend" (change)="onChange()" (keyup)="onChange()" >Adición mecanografiada:
onChange(): void { this.inputChanged = true; if (!this.domainUrl) { this.result = {}; } }Ejemplo de trabajo: https://stackblitz.com/edit/angular-ivy-v2qsr5?file=src%2Fapp%2Fapp.component.ts