全角・半角文字チェック - Angular4で行う JavaScript

                       全角・半角文字チェック - Angular4で行う

システムで全角・半角文字のチェックは気になるポイントと思います。
下記は簡単なステップで説明しますので、何か不明な点をございましたらご連絡ください。

新しいコンポーネントの生成：

$ ng g c zenkaku-hankaku

上記のコマンドを実行したあとで、下記のフォルダーで「.css、.html、.ts」ファイルを生成されています。

/src/app/zenkaku-hankaku
    #  zenkaku-hankaku.component.css
    <> zenkaku-hankaku.component.html
    TS zenkaku-hankaku.component.spec.ts
    TS zenkaku-hankaku.component.ts

次のステップは、「zenkaku-hankaku.component.ts」ファイルを開いて,変数と文字チェックロジックの追加。

export class ZenkakuHankakuComponent implements OnInit {
  keyValues:string = '';
  zenKakuKeyValue:string = '' ;
  hanKakuKeyValue:string = '' ;
  zenKakuMessage:string = '' ;
  hanKakuMessage:string = '' ;

  constructor() { }

  ngOnInit() {
  }
}

  onKeyTodo(event: any, values) {
    this.keyValues = event.target.value;
    // start - Switch input
    switch (values) {
      case 'zenkaku_name':
        this.zenKakuMessage = '全角のみを入力してください。';
        this.zenKakuKeyValues = 'zenkaku_name';
        this.check2ByteFunc(this.keyValues, values, this.zenKakuKeyValue, this.zenKakuMessage);
      break;
      case 'hankaku_name':
        this.hanKakuMessage = '半角のみを入力してください。';
        this.hanKakuKeyValues = 'hankaku_name';
        this.check1ByteFunc(this.keyValues, values, this.hanKakuKeyValue, this.hanKakuMessage);
        break;
    }
    // end - Switch input
  }

// DOUBLE BYTE 全角文字
 // --------------------------------------------------------------------
 // 関数者 : Alok Rawat
 // Function to Check 全角文字
 // ---------------------------------------------------------------------
 check2ByteFunc(val, col_name, header_name , msg) {
  const actual_len = val.length;
  const str_len = this.countLength(val);
  let err_val = '';

  if (parseInt(actual_len)*2 === str_len) {
    this.clearErrMsg(header_name);
  } else {
    for (let i = 0; i <= val.length - 1; i++) {
      if (this.countLength(val[i]) === val[i].length) {
        if (err_val !== '' ) {
          err_val = err_val + ',' + val[i];
        } else {
          err_val = val[i];
        }
      }
    }
  }
}

// SINGLE BYTE 半角文字
// --------------------------------------------------------------------
// 関数者 : Alok Rawat
// Function to Check 半角ｶﾅ文字
// ---------------------------------------------------------------------
check1ByteFunc(val, col_name, header_name, msg) {
  // Function to Check 半角カナ
  const reg = new RegExp(/^[ｦ-ﾟ ､0-9a-zA-Z]*$/);  
  if ( val.match(reg)) {
    this.clearErrMsg(header_name);
  }
}

他の半角文字を追加したいの場合は、下記のリンクをご参照ください。
https://javascript.programmer-reference.com/js-check-hankaku-kana/

// count the length of the input string
countLength(str) {
  let r = 0;
  for (let i = 0; i < str.length; i++) {
      const c = str.charCodeAt(i);
      // Shift_JIS: 0x0 ～ 0x80, 0xa0 , 0xa1 ～ 0xdf , 0xfd ～ 0xff
      // Unicode : 0x0 ～ 0x80, 0xf8f0, 0xff61 ～ 0xff9f, 0xf8f1 ～ 0xf8f3
      if ( (c >= 0x0 && c < 0x81) || (c === 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)) {
          r += 1;
      } else {
          r += 2;
      }
  }
  return r;
}

// if input value is valid then clear the error.
clearErrMsg(namekey) {
  if ( namekey === 'zenkaku_name') {
    this.zenKakuMessage = '';
  }
  if ( namekey === 'hankaku_name') {
    this.hanKakuMessage = '';
  }
}

「zenkaku-hankaku.component.html」ファイルを開いて,textboxとngの設定

<p>
  <u>全角・半角チェック機能確認</u>
</p>
<div class="row">
    <div class="container-fluid">
        <div class="form-group col-sm-6">
            <label class="label-control">名称</label>
            <label label_back_color>(全角のみ)</label>
            <input name="zenkaku_name" type="text" class="form-control"
            (keyup)="onKeyTodo($event,'zenkaku_name')" placeholder="例：山田　太郎" />
            <div class="text-danger" *ngIf="zenKakuKeyValue=='zenkaku_name'">{{ zenKakuMessage }}</div>
        </div>
        <div class="form-group col-sm-6">
            <label class="label-control">ﾒｲｼｮ（ｶﾅ）</label>
            <label label_back_color>(半角のみ)</label>
            <input name="hankaku_name" type="text" class="form-control"
            (keyup)="onKeyTodo($event,'hankaku_name')" placeholder="例：ﾔﾏﾀﾞ ﾀﾛｳ"/>
            <div class="text-danger" *ngIf="hanKakuKeyValue=='hankaku_name'">{{ hanKakuMessage }}</div>
        </div>
    </div>
</div>

下記は結果の情報です。
■全角文字チェック
1.NGケース：

２.OKケース:

■半角文字チェック
1.NGケース：

２.OKケース:

終わり！！！

Enjoy coding!

Thanks & Best Regards,
Alok Rawat