时间戳

首页 > 解决方案 > 使用 Angular 输入后添加图标

angular - 使用 Angular 输入后添加图标

问题描述

我正在使用Angular 7。当我打开对话框时，我想在输入后设置一个星形图标，如箭头所示，而不是目前的输入。

这是我的对话框：

在此处输入图像描述

这是我的html：

<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>

感谢您为解决此问题提供的任何帮助。

标签： angular

解决方案

为了使图像远离实际输入，但在同一行，您可以将输入和图像放在自己的一行中：

<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>

推荐阅读