【Angular】用語やメッセージなどを別ファイルに切り分けて実装する

2023 9/12

2022年8月7日 2023年9月12日

用語やメッセージをHTMLファイルにベタ書きしているけど、コードの可続性を上げるために別ファイルで管理したいなぁ….

こんな疑問を解決します。

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】この記事ではココナラに似てる副業サイトを11こ紹介しています。今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。本記事のゴールココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

yoteipickerで休日の暇つぶしを探す

結論、以下のようにできます。

↓用語を別ファイルに切り分けたファイル

export namespace CommonWord {
    export const TITLE = 'テスト';
}

上記をimportする

import { Component, OnInit } from '@angular/core';
import { CommonWord } from 'src/app/common/word';

@Component({
  selector: 'app-t3',
  templateUrl: './t3.component.html',
  styleUrls: ['./t3.component.css']
})
export class T3Component implements OnInit {
  public CommonWord = CommonWord;

  constructor() { }

  ngOnInit(): void {
  }
}

HTMLファイルで呼び出す

<div>{{ CommonWord.TITLE }}</div>

これでOKです。

【エラーメッセージを別ファイルに切り分ける場合】

export namespace ErrorMessage {
    export const REQUIRED   = '必須です';
    export const TENLIMITED = '10文字以内で入力してください。';
}

定義したErrorMessageをimportし、errorMessage = ErrorMessageと変数に代入します。

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ErrorMessage } from 'src/app/common/errorMessege';

@Component({
  selector: 'app-user-register',
  templateUrl: './user-register.component.html',
  styleUrls: ['./user-register.component.css']
})
export class UserRegisterComponent implements OnInit {
  public errorMessage = ErrorMessage;

  public registerForm: FormGroup;
  public name: FormControl;
  public address: FormControl;
  public phone: FormControl;
  public email: FormControl;
  public password: FormControl;
  public passwordConfirm: FormControl;

  constructor() {}

  ngOnInit(): void {
    this.name = new FormControl('', [
      Validators.required,
      Validators.maxLength(16),
    ]);
    this.address = new FormControl('', Validators.required);
    this.phone = new FormControl('', Validators.required);
    this.email = new FormControl('', Validators.required);
    this.password = new FormControl('', Validators.required);
    this.passwordConfirm = new FormControl('', Validators.required);

    this.registerForm = new FormGroup({
      name: this.name,
      address: this.address,
      phone: this.phone,
      email: this.email,
      password: this.password,
      passwordConfirm: this.passwordConfirm,
    });
  }

  onSubmit() {
  }
}

errorMessage.REQUIREDなどと呼び出します。

<form class="form-field" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <!-- 名前のフォーム -->
    <mat-form-field appearance="fill">
        <mat-label>名前</mat-label>
        <input matInput placeholder="名前を入力してください" [formControl]="name">
        <mat-error *ngIf="name.errors?.['maxLength']">{{ errorMessage.TENLIMITED }}</mat-error>
    </mat-form-field>

    <!-- 住所のフォーム -->
    <mat-form-field appearance="fill">
        <mat-label>住所</mat-label>
        <input matInput placeholder="住所を入力してください" [formControl]="address">
        <mat-error *ngIf="address.errors?.['required']">{{ errorMessage.REQUIRED }}</mat-error>
    </mat-form-field>

    <!-- 電話番号のフォーム -->
    <mat-form-field appearance="fill">
        <mat-label>電話番号</mat-label>
        <input matInput placeholder="電話番号を入力してください" [formControl]="phone">
        <mat-error *ngIf="phone.errors?.['required']">{{ errorMessage.REQUIRED }}</mat-error>
    </mat-form-field>

    <!-- メールアドレスのフォーム -->
    <mat-form-field appearance="fill">
        <mat-label>メールアドレス</mat-label>
        <input matInput placeholder="メールアドレスを入力してください" [formControl]="email">
        <mat-error *ngIf="email.errors?.['required']">{{ errorMessage.REQUIRED }}</mat-error>
    </mat-form-field>

    <!-- パスワードのフォーム -->
    <mat-form-field appearance="fill">
        <mat-label>パスワード</mat-label>
        <input matInput placeholder="パスワードを入力してください" [formControl]="password">
        <mat-error *ngIf="password.errors?.['required']">{{ errorMessage.REQUIRED }}</mat-error>
    </mat-form-field>

    <!-- パスワード(確認用)のフォーム -->
    <mat-form-field appearance="fill">
        <mat-label>パスワード(確認用)</mat-label>
        <input matInput placeholder="パスワード(確認用)を入力してください" [formControl]="passwordConfirm">
        <mat-error *ngIf="passwordConfirm.errors?.['required']">{{ errorMessage.REQUIRED }}</mat-error>
    </mat-form-field>
    <button class="form-button" mat-raised-button color="primary" [disabled]="registerForm.invalid">登録する</button>
</form>

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい