1
votes

Ajouter une icône après la saisie en utilisant Angular

J'utilise Angular 7. Lorsque j'ouvre ma boîte de dialogue, je souhaite définir une icône en forme d'étoile après l'entrée, comme indiqué par les flèches, pas dans l'entrée comme actuellement.

Voici ma boîte de dialogue:

entrez la description de l'image ici

Ceci est mon html: p>

<h1 mat-dialog-title>{{'DNS.Create entry' | translate }}</h1>
<div mat-dialog-content fxLayout="row" fxLayoutAlign="center center">
    <form name="createEntryForm" [formGroup]="createEntryForm" fxLayout="column" fxFlex="100">
        <mat-form-field>
            <mat-label>Type</mat-label>
            <mat-select placeholder="type" formControlName="type" [(ngModel)]="entrType">
                <mat-option value="A">A</mat-option>
                <mat-option value="CNAME">CNAME</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-icon class="amber-600-fg" matTooltip="Click to add/remove shortcut">star</mat-icon>
        <mat-form-field *ngIf="entrType == 'A'">
            <mat-label>Hostname</mat-label>
            <input matInput formControlName="hostname">
            <span matSuffix>.{{ domain.name }}</span>
            <mat-error *ngIf="hostname.errors?.pattern">{{'DNS.Hostname not valid' | translate }}</mat-error>
        </mat-form-field>
        <mat-form-field *ngIf="entrType == 'CNAME'">
            <mat-label>Hostname</mat-label>
            <input matInput formControlName="hostname">
            <span matSuffix>.{{ domain.name }}</span>
            <mat-error *ngIf="hostname.errors?.pattern">{{'DNS.Hostname not valid' | translate }}</mat-error>
        </mat-form-field>
        <mat-icon class="amber-600-fg" matTooltip="Click to add/remove shortcut">star</mat-icon>
        <mat-form-field *ngIf="entrType == 'A'">
            <mat-label>{{'DNS.IP address' | translate }}</mat-label>
            <input matInput formControlName="value">
            <mat-error *ngIf="value.errors?.pattern">
                {{'DNS.Value not valid' | translate }}
            </mat-error>
        </mat-form-field>
        <mat-icon class="amber-600-fg" matTooltip="Click to add/remove shortcut">star</mat-icon>
        <mat-form-field *ngIf="entrType == 'CNAME'">
            <mat-label>FQDN cible</mat-label>
            <input matInput formControlName="value">
            <mat-error *ngIf="value.errors?.pattern">
                {{'DNS.Value not valid' | translate }}
            </mat-error>
        </mat-form-field>
        <mat-form-field>
            <mat-label>TTL</mat-label>
            <mat-select placeholder="ttl" formControlName="ttl" [(ngModel)]="ttlType">
                <mat-option value="300">5 min</mat-option>
                <mat-option value="3600">{{'DNS.1 hour' | translate }}</mat-option>
                <mat-option value="86400">{{'DNS.1 day' | translate }}</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-icon class="amber-600-fg" matTooltip="Click to add/remove shortcut">star</mat-icon>
    </form>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
    <button mat-button (click)="onCancelClick()">{{'DNS.Cancel' | translate }}</button>
    <button mat-raised-button color="primary" [mat-dialog-close]="createEntryForm" [disabled]="createEntryForm.invalid">{{'DNS.Create'
        | translate }}</button>
</div>

J'apprécie toute aide pour résoudre ce problème.

angular

3 commentaires

Donnez-vous une largeur suffisante au div d'emballage?

Je n'ai pas compris ce que vous voulez dire ??

Je voulais dire que la forme devait être plus large. Vous pouvez le styliser en css ou flexlayout je suppose. Il y a un débordement. Quelque chose comme fxFlex = "120"?

3 Réponses :

1
votes

Utilisez matPrefix ou matSuffix

<mat-form-field>
    <input matInput placeholder="Amount" type="number">
    <span matPrefix>ICON HERE</span>
    <span matSuffix>ICON HERE</span>
</mat-form-field>

https://stackblitz.com/angular/vkgoyrdlnyjp?file=app%2Fform-field-prefix-suffix-example.html

https://material.angular.io/components/form-field/overview p >

1 commentaires

Je veux insérer après l'entrée pas dans l'entrée

0
votes

utilisez la police géniale pour vos champs de saisie

mat-selec::after { 
  font-family: "Font Awesome 5 Free";
  content: "\f005";
}

2 commentaires

j'essaie ce que vous m'avez donné mais il insère l'icône dans l'entrée moi je veux l'insérer après l'entrée montrer l'image s'il vous plaît

utilisez la police géniale pour vos champs de saisie

1
votes

Pour garder l'image en dehors de l'entrée réelle, mais sur la même ligne, vous pouvez placer l'entrée et l'image dans une ligne propre:

<div fxLayout="row"> 
<mat-form-field>
        <mat-label>Type</mat-label>
        <mat-select placeholder="type" formControlName="type" [(ngModel)]="entrType">
            <mat-option value="A">A</mat-option>
            <mat-option value="CNAME">CNAME</mat-option>
        </mat-select>
</mat-form-field>
<mat-icon class="amber-600-fg" matTooltip="Click to add/remove shortcut">star</mat-icon>
</div>

0 commentaires