输入角度后添加图标

时间:2019-03-27 15:06:06

标签: angular

嗨,我使用的是angular 7,当我打开对话框时,我想在输入旁边设置星号,我想在输入不在输入后插入

这是我在图像中的对话框:

enter image description here

这是我的代码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>

请帮助解决此问题。

谢谢您的时间

3 个答案:

答案 0 :(得分:1)

要在实际输入中保留图像,但在同一行中,可以将输入和图像放置在它们自己的行中:

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

答案 1 :(得分:0)

使用matPrefix或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

答案 2 :(得分:0)

在输入字段中使用超棒的字体

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