.NET MAUI (データ入力と検証)

# データ入力と検証

https://qiita.com/kashin777/items/2f1abcba9c8fa02b592c

[前回](https://qiita.com/kashin777/items/2f1abcba9c8fa02b592c)、単純な画面遷移ができたので、
今回は、画面から値を入力し、検証結果で画面遷移を制御してみます。

# 開発環境
* Win11
* VS2022 Preview Version 17.3.0 Preview 2.0

環境構築＆プロジェクト作成の流れはこちらの記事でどうぞ。

https://qiita.com/kashin777/items/eae43a555dc28867926f

# 実装
単純なものがよいので、ログイン画面にしてみました。

.NET MAUI の実装方法も、変わらずMVVMです。

https://docs.microsoft.com/ja-jp/dotnet/maui/xaml/fundamentals/mvvm

作成したソースをGithubに公開しました。

https://github.com/kashin777/MauiAppDemo

## Shell
ログイン画面と、遷移先の画面を追加しておきます。

[AppShell.xaml](https://github.com/kashin777/MauiAppDemo/blob/master/AppShell.xaml)

## ログイン画面
社員番号は数値4桁。
パスワードは社員番号と同じであれば、メイン画面へ遷移します。
入力値が不正な場合や、パスワードが不一致の場合は、ログイン画面にエラーメッセージを表示します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515556/12eec94b-2152-6fb8-78e9-d2fcf12bb120.png)

[LoginPage.xaml](https://github.com/kashin777/MauiAppDemo/blob/master/Pages/LoginPage.xaml)
[LoginPage.xaml.cs](https://github.com/kashin777/MauiAppDemo/blob/master/Pages/LoginPage.xaml.cs)

### 入力値の検証
どうやるのがベストプラクティスなのかわからなかったので、Behaviorでやってみました。

[ValidationPropertyBehavior.cs](https://github.com/kashin777/MauiAppDemo/blob/master/Pages/ValidationPropertyBehavior.cs)
[ValidationPropertyConverter.cs](https://github.com/kashin777/MauiAppDemo/blob/master/Pages/ValidationPropertyConverter.cs)


なにも入力しないで[ログイン]ボタンを押してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515556/07f81678-697c-e3bb-35dd-5f3210749594.png)

エラーがある場合、ログインボタンは無効化されているので、社員番号に「abcd」を入力してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515556/dc7e4c1d-a2dd-a638-b1c2-e95798b59884.png)

社員番号を「1234」(数値4桁以内)にしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515556/66817544-b55c-da86-fd39-280c5700ea95.png)

パスワードに「1235」を入力してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515556/3b2c8c11-712d-493b-c106-7f8cf19d2a3d.png)

ログインボタンを押してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515556/23a597b2-00ca-fefb-3815-15c6798af826.png)


テキストが変更されるたびに、エラー内容が切り替わります。
TODO Unfocusedでのイベント発火に変更する

### UIの部品化

検証エラーの一覧表示(赤い枠の部分)を、ContentViewを継承して部品化してみた。
[ValidationPropertyError.xaml](https://github.com/kashin777/MauiAppDemo/blob/master/Pages/ValidationPropertyError.xaml)
[ValidationPropertyError.xaml.cs](https://github.com/kashin777/MauiAppDemo/blob/master/Pages/ValidationPropertyError.xaml.cs)

※上記では使ってないけど、エラーを全部まとめて表示するやつ
[ValidationPropertyErrors.xaml](https://github.com/kashin777/MauiAppDemo/blob/master/Pages/ValidationPropertyErrors.xaml)
[ValidationPropertyErrors.xaml.cs](https://github.com/kashin777/MauiAppDemo/blob/master/Pages/ValidationPropertyErrors.xaml.cs)

## メイン画面
入力値が正しい状態で、[ログイン]ボタンを押してみます。
ログイン画面で入力した社員番号を、メイン画面に渡して表示しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515556/a99c4366-9f5b-6e90-cb42-66f29ddc3f5f.png)

[MainPage.xaml](https://github.com/kashin777/MauiAppDemo/blob/master/Pages/MainPage.xaml)
[MainPage.xaml.cs](https://github.com/kashin777/MauiAppDemo/blob/master/Pages/MainPage.xaml.cs)

### 画面間のデータの受け渡し
データの渡し方としては、QueryParameterでやってみました。

https://docs.microsoft.com/ja-jp/dotnet/maui/fundamentals/shell/navigation#pass-data


別の方法として、画面間のデータの受け渡しはDIで

https://qiita.com/kashin777/items/8ff8dff4bc02bba670c5