発生した事象
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 {
}
こちらもおススメ