嗨,我使用的是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>
请帮助解决此问题。
谢谢您的时间
答案 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
答案 2 :(得分:0)
在输入字段中使用超棒的字体
mat-selec::after {
font-family: "Font Awesome 5 Free";
content: "\f005";
}