J'utilise un matériau angulaire ( https: //material.angular. io / components / form-field / overview ) pour la saisie.
Je souhaite ajouter automatiquement «+6» lorsque l'utilisateur clique sur le champ pour insérer un numéro de téléphone
<mat-form-field> <span matPrefix>6 </span> <input matInput placeholder="Phone Number (Eg: 60181345689)" required formControlName="contactNo [value]="field_contact"> </mat-form-field>
3 Réponses :
Je suppose que vous utilisez le validateur de modèle :
get activeDocumentElement() { return document.activeElement; }
Si vous voulez l'afficher uniquement sur le focus:
<span matPrefix *ngIf="!myForm.get('contactNo').hasError('pattern') && activeDocumentElement === phoneNumber">
<input #phoneNumber matInput placeholder="Phone Number (Eg: 60181345689)" required formControlName="contactNo [value]="field_contact">
Vous pouvez utiliser la liaison d'événement focusin .
Sur votre component.html,
inputValue: string = '';
addPrefix(event) {
this.inputValue = '+6'
}
Et sur votre component.ts,
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Click here" (focusin)="addPrefix($event)" [value]="inputValue">
</mat-form-field>
</form>
Cela ajoutera le '+6' sur l'entrée lorsque l'utilisateur clique sur l'entrée.
J'ai fait une démo pour vous sur ici .
L'ajout de la directive matPrefix à un élément à l'intérieur du le désignera comme préfixe. Il sera inclus dans le conteneur visuel qui encapsule le contrôle de formulaire conformément à la spécification Material.
<form class="example-form">
<mat-form-field class="example-full-width">
<span matPrefix>+6 </span>
<input type="tel" matInput placeholder="Phone Number">
</mat-form-field>
</form>
Avons-nous besoin de supprimer le +6 lorsque l'utilisateur désélectionne l'entrée
pas nécessaire ... mais bon si on peut faire ça
Ok, laissez-moi savoir si ma réponse fonctionne! J'ai ajouté le code pour gérer le clic des champs pour ajouter le préfixe