Angularのテンプレートで@ifディレクティブを使う際、ドット記法だとエラーになるがブラケット記法ならエラーにならない

//テンプレートの実装
    <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'])