angular-t9n/src/app/overview/add-language-modal/add-language-modal.component.html

A translation tool for Angular i18n

<h2 mat-dialog-title i18n>Add language</h2>
<form [formGroup]="form" (ngSubmit)="createLanguage()">
  <mat-dialog-content>
    <p i18n>Pattern must match <code>\w[\w-]+</code></p>
    <p i18n>(e.g. en, en-GB or en-US-POSIX)</p>
    <mat-form-field>
      <input matInput formControlName="language" [matAutocomplete]="localeAutocomplete" />
      <mat-error *ngIf="form.get('language')?.errors?.pattern" i18n>Invalid pattern</mat-error>
      <mat-error *ngIf="form.get('language')?.errors?.target" i18n
        >Language already exists</mat-error
      >
      <mat-autocomplete #localeAutocomplete>
        <mat-option *ngFor="let locale of locales | async" [value]="locale">{{
          locale
        }}</mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button type="button" mat-raised-button color="accent" mat-dialog-close i18n>Cancel</button>
    <button mat-raised-button color="primary" [disabled]="!form.valid" i18n>Add</button>
  </mat-dialog-actions>
</form>