Angularのテンプレートで@ifディレクティブを使う際、ドット記法だとエラーになるがブラケット記法ならエラーにならない
Q&A
Closed
解決したいこと
AngularnのValidatorの仕組みが知りたい！！
発生している問題・エラー
//テンプレートの実装
<form [formGroup]="myGroup" (ngSubmit)="onSubmit()">
<table>
<tr>
<th>Name</th>
<td>
@if (myGroup.get('name')?.errors?.required){
Nameは必須項目です<br>
}
<input type="text" formControlName="name">
</td>
<tr>
</table>
</form>
//コンポーネントの実装
import { Component, OnInit } from '@angular/core';
import { FormControl, FormControlState, FormGroup, FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-chap3',
standalone: true,
imports: [FormsModule, ReactiveFormsModule, CommonModule],
templateUrl: './chap3.component.html',
styleUrl: './chap3.component.css'
})
export class Chap3Component implements OnInit {
myGroup!: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.myGroup=this.fb.group({
name: ['', [Validators.required]]
});}
get name() { return this.myGroup.get('name'); }
}
テンプレートで以下のエラーが起きる
該当するソースコード
@if (myGroup.get('name')?.errors?.required)
自分で試したこと
上記エラーの該当ソースを以下のようにドット記法からブラケット記法に変更すると
エラーはでなくなった。
@if (myGroup.get('name')?.errors?.['required'])
質問
なんでドット記法で出るエラーがブラケット記法だと出ないのか知りたいです！！！
AngularのValidetersクラスのrequiredメソッドの作り的な問題？
参考にしたページ
https://v17.angular.io/guide/form-validation
https://qiita.com/TakanoriOkawa/items/7de0b158afa17ef2dae8
0
