今日は業務ないで特殊文字のバリデーションを実装したので復習していきたいと思います!
// app.component.html
<div class="item-wrap">
// 文字を打ち込むごとに内容を取得
<input #box (keyup)="onKey(box.value)" />
// 取得した文字を出力
<p>{{text}}</p>
// 特殊文字が含まれていたら表示
<p class="red" *ngIf="bool">特殊文字が含まれています</p>
</div>
// app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
// 入力されたテキスト
text = "";
// 特殊文字が入っているかの判定
bool = false;
// keyupする度に更新する関数
onKey(value: string) {
// 引数から受け取った入力した値を管理する為に代入
this.text = value;
// 入力された文言に特殊文字があるかmatchで検索する
const hoge = this.text.match(/[&.*+\-%?^¥$€{}()・!?:|[\]\\]/g);
// もし特殊文字が会ったら
if (hoge) {
// boolをtrue
this.bool = true;
// もし特殊文字が会ったら
} else {
// boolをfalse
this.bool = false;
}
}
}
普段Angularを触ることが多いのですが、そろそろいいかげんReactを触っていきたいなぁと思う今日この頃です。