[Angular]formのinvalidプロパティ使用時に「Cannot read property 'invalid' of undefined」エラーが発生

カテゴリ: Angular

発生した事象

formに設置したsubmitボタンのdisabled制御にFormのinvalidプロパティを使おうとしたが、下記のエラーが発生する。

AppComponent.html:3 ERROR TypeError: Cannot read property 'invalid' of undefined
    at Object.eval [as updateRenderer] (AppComponent.html:4)
    at Object.debugUpdateRenderer [as updateRenderer] (services.ts:309)
    at checkAndUpdateView (view.ts:401)
    at callViewAction (view.ts:753)
    at execComponentViewsAction (view.ts:686)
    at checkAndUpdateView (view.ts:401)
    at callWithDebugContext (services.ts:647)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (services.ts:217)
    at ViewRef_.detectChanges (refs.ts:400)
    at eval (application_ref.ts:695)

書いたコード

@Component({
  selector: 'my-app',
  template: `
  <form #inquiryForm="ngForm" (ngSubmit)="submit()" novalidate>
    <input type="submit" name="submit" [disabled]="inquryForm.invalid">
  </form>
  `,
})

export class AppComponent {
}

原因

Formの名前(#inquiryForm)と、submitの[diabled]に書いたフォームの名前(inquryForm)の綴りが間違っていた。

対処方法

以下のように綴りを直したらエラーが消えた

@Component({
  selector: 'my-app',
  template: `
  <form #inquiryForm="ngForm" (ngSubmit)="submit()" novalidate>
    <input type="submit" name="submit" [disabled]="inquiryForm.invalid">
  </form>
  `,
})

export class AppComponent {
}

Amazonでおトクに買い物する方法
AmazonチャージでポイントGET


Amazonは買いもの前にAmazonギフト券をチャージしてポイントをゲットしないと損!

こちらもおススメ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です