\n\nThis plugin disallows the use of certain HTML tags.
\n\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
This rule prevents specific elements from being used in Angular templates. It is commonly used to ban inline overlay components such as <ion-modal>, <ion-popover>, <ion-toast>, <ion-alert>, <ion-loading>, <ion-picker>, and <ion-action-sheet>, which should be presented through launcher methods or dedicated services instead of being declared in the template.
The rule runs on .html template files and reports any element whose tag name is in the configured elements list. It traverses the template AST, including Angular control flow syntax such as @if, @for, @else, and nested then / else branches.
.spec.html files are ignored so that tests are not affected.elements array.{\n \"rules\": {\n \"@rdlabo/rules/deny-element\": [\n \"error\",\n {\n \"elements\": [\"ion-modal\", \"ion-popover\", \"ion-toast\", \"ion-alert\", \"ion-loading\", \"ion-picker\", \"ion-action-sheet\"]\n }\n ]\n }\n}\nelementsstring[]ion-modal, ion-popover, ion-toast, ion-alert, ion-loading, ion-picker, ion-action-sheetArray of element tag names to disallow. The rule compares these names to the Element node type in the Angular template AST, so it checks both the element itself and its presence inside control flow branches.
<ion-modal></ion-modal>\n\n<div>\n <ion-toast></ion-toast>\n <ion-alert></ion-alert>\n</div>\n@if (showModal) {\n<ion-modal>Modal content</ion-modal>\n}\n<ion-button (click)=\"presentModal()\">Open</ion-button>\n@for (item of items; track item.id) {\n<ion-card>\n <ion-card-header>{{ item.name }}</ion-card-header>\n</ion-card>\n}\nEnable this rule in projects that use the launcher pattern for overlays. It pairs with @rdlabo/rules/prefer-modal-launcher and @rdlabo/rules/prefer-disable-handler to keep modal and overlay logic out of the template.
\n\nThis plugin disallows the use of certain HTML tags.
\n\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
This rule prevents specific elements from being used in Angular templates. It is commonly used to ban inline overlay components such as <ion-modal>, <ion-popover>, <ion-toast>, <ion-alert>, <ion-loading>, <ion-picker>, and <ion-action-sheet>, which should be presented through launcher methods or dedicated services instead of being declared in the template.
The rule runs on .html template files and reports any element whose tag name is in the configured elements list. It traverses the template AST, including Angular control flow syntax such as @if, @for, @else, and nested then / else branches.
.spec.html files are ignored so that tests are not affected.elements array.{\n \"rules\": {\n \"@rdlabo/rules/deny-element\": [\n \"error\",\n {\n \"elements\": [\"ion-modal\", \"ion-popover\", \"ion-toast\", \"ion-alert\", \"ion-loading\", \"ion-picker\", \"ion-action-sheet\"]\n }\n ]\n }\n}\nelementsstring[]ion-modal, ion-popover, ion-toast, ion-alert, ion-loading, ion-picker, ion-action-sheetArray of element tag names to disallow. The rule compares these names to the Element node type in the Angular template AST, so it checks both the element itself and its presence inside control flow branches.
<ion-modal></ion-modal>\n\n<div>\n <ion-toast></ion-toast>\n <ion-alert></ion-alert>\n</div>\n@if (showModal) {\n<ion-modal>Modal content</ion-modal>\n}\n<ion-button (click)=\"presentModal()\">Open</ion-button>\n@for (item of items; track item.id) {\n<ion-card>\n <ion-card-header>{{ item.name }}</ion-card-header>\n</ion-card>\n}\nEnable this rule in projects that use the launcher pattern for overlays. It pairs with @rdlabo/rules/prefer-modal-launcher and @rdlabo/rules/prefer-disable-handler to keep modal and overlay logic out of the template.
\n\nDisallow
\n.create()on ModalController / PopoverController; open overlays via launchers instead.\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
This rule prevents direct creation of Ionic overlays through controller .create() calls. In the rdlabo architecture, overlays should be opened through launcher functions and a shared presentModal / presentPopover helper. This keeps overlay logic centralized and the call site decoupled from the controller API.
The rule detects .create() calls where the receiver is a ModalController or PopoverController (or other configured controllers). It resolves the controller through several patterns:
this.modalCtrl.create()modalCtrl.create() (where modalCtrl is inject(ModalController))inject(ModalController).create()constructor(private modalCtrl: ModalController)ModalControllerOther overlay controllers such as LoadingController, AlertController, ToastController, and ActionSheetController are not denied by default, because they may be intentionally used directly.
{\n \"rules\": {\n \"@rdlabo/rules/deny-overlay-create\": [\n \"error\",\n {\n \"deny\": [\"ModalController\", \"PopoverController\"]\n }\n ]\n }\n}\ndenystring[][\"ModalController\", \"PopoverController\"]Controller class names whose .create() calls should be disallowed. Use an empty array to disable the rule.
export class ExamplePage {\n readonly #modalCtrl = inject(ModalController);\n\n async open() {\n await this.#modalCtrl.create({ component: OtherPage });\n }\n}\nexport async function open(modalCtrl: ModalController) {\n await modalCtrl.create({ component: OtherPage });\n}\nexport class ExamplePage {\n constructor(private modalCtrl: ModalController) {}\n\n async open() {\n await this.modalCtrl.create({ component: OtherPage });\n }\n}\nexport const launchOtherPage = (overlay: Helper, props: Props) => {\n return overlay.presentModal(OtherPage, props);\n};\nexport class ExamplePage {\n readonly #loadingCtrl = inject(LoadingController);\n\n async showLoading() {\n await this.#loadingCtrl.create({ message: '...' });\n }\n}\nexport class ExamplePage {\n readonly #modalCtrl = inject(ModalController);\n\n dismiss(data?: unknown) {\n this.#modalCtrl.dismiss(data);\n }\n}\nEnable this rule in Ionic projects that follow the launcher pattern and use a shared overlay helper. It pairs with @rdlabo/rules/prefer-modal-launcher and @rdlabo/rules/deny-element.
\n\nDisallow
\n.create()on ModalController / PopoverController; open overlays via launchers instead.\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
This rule prevents direct creation of Ionic overlays through controller .create() calls. In the rdlabo architecture, overlays should be opened through launcher functions and a shared presentModal / presentPopover helper. This keeps overlay logic centralized and the call site decoupled from the controller API.
The rule detects .create() calls where the receiver is a ModalController or PopoverController (or other configured controllers). It resolves the controller through several patterns:
this.modalCtrl.create()modalCtrl.create() (where modalCtrl is inject(ModalController))inject(ModalController).create()constructor(private modalCtrl: ModalController)ModalControllerOther overlay controllers such as LoadingController, AlertController, ToastController, and ActionSheetController are not denied by default, because they may be intentionally used directly.
{\n \"rules\": {\n \"@rdlabo/rules/deny-overlay-create\": [\n \"error\",\n {\n \"deny\": [\"ModalController\", \"PopoverController\"]\n }\n ]\n }\n}\ndenystring[][\"ModalController\", \"PopoverController\"]Controller class names whose .create() calls should be disallowed. Use an empty array to disable the rule.
export class ExamplePage {\n readonly #modalCtrl = inject(ModalController);\n\n async open() {\n await this.#modalCtrl.create({ component: OtherPage });\n }\n}\nexport async function open(modalCtrl: ModalController) {\n await modalCtrl.create({ component: OtherPage });\n}\nexport class ExamplePage {\n constructor(private modalCtrl: ModalController) {}\n\n async open() {\n await this.modalCtrl.create({ component: OtherPage });\n }\n}\nexport const launchOtherPage = (overlay: Helper, props: Props) => {\n return overlay.presentModal(OtherPage, props);\n};\nexport class ExamplePage {\n readonly #loadingCtrl = inject(LoadingController);\n\n async showLoading() {\n await this.#loadingCtrl.create({ message: '...' });\n }\n}\nexport class ExamplePage {\n readonly #modalCtrl = inject(ModalController);\n\n dismiss(data?: unknown) {\n this.#modalCtrl.dismiss(data);\n }\n}\nEnable this rule in Ionic projects that follow the launcher pattern and use a shared overlay helper. It pairs with @rdlabo/rules/prefer-modal-launcher and @rdlabo/rules/deny-element.
\n\nThis plugin disallows the use of soft private modifier.
\n\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.- ✒️ The
\n--fixoption on the command line can automatically fix some of the problems reported by this rule.
TypeScript's private modifier is only enforced at compile time. It can still be accessed at runtime through bracket notation or by casting to any. JavaScript hard-private fields (#) are runtime-enforced and cannot be bypassed from outside the class. This rule replaces private properties and methods with # fields and updates this.x references to this.#x.
This rule checks classes for the following patterns:
\nprivate property definition (private field = ...)private method definition (private method() { ... })this.field reference where field was declared as privateIt does not report constructors, because private constructor() has a different meaning (preventing external instantiation). A private readonly property is reported; the fix removes private, adds #, and preserves readonly.
The rule auto-fixes by:
\nprivate keyword.# before the property or method name.this.field or this.method() references in the class to this.#field or this.#method().class TokenStore {\n private token = '';\n\n private refresh() {\n this.token = 'new-token';\n }\n}\nclass TokenStore {\n #token = '';\n\n #refresh() {\n this.#token = 'new-token';\n }\n}\nThis rule has no options.
\nEnable this rule when a project wants runtime-enforced encapsulation for class internals. It is safe to run with --fix on existing code, but it changes public API surface: any code that was relying on compile-time private access at runtime will break.
\n\nThis plugin disallows the use of soft private modifier.
\n\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.- ✒️ The
\n--fixoption on the command line can automatically fix some of the problems reported by this rule.
TypeScript's private modifier is only enforced at compile time. It can still be accessed at runtime through bracket notation or by casting to any. JavaScript hard-private fields (#) are runtime-enforced and cannot be bypassed from outside the class. This rule replaces private properties and methods with # fields and updates this.x references to this.#x.
This rule checks classes for the following patterns:
\nprivate property definition (private field = ...)private method definition (private method() { ... })this.field reference where field was declared as privateIt does not report constructors, because private constructor() has a different meaning (preventing external instantiation). A private readonly property is reported; the fix removes private, adds #, and preserves readonly.
The rule auto-fixes by:
\nprivate keyword.# before the property or method name.this.field or this.method() references in the class to this.#field or this.#method().class TokenStore {\n private token = '';\n\n private refresh() {\n this.token = 'new-token';\n }\n}\nclass TokenStore {\n #token = '';\n\n #refresh() {\n this.#token = 'new-token';\n }\n}\nThis rule has no options.
\nEnable this rule when a project wants runtime-enforced encapsulation for class internals. It is safe to run with --fix on existing code, but it changes public API surface: any code that was relying on compile-time private access at runtime will break.
\n\nDisallow non-lifecycle methods on
\n@Component. Allowed lifecycle methods are derived fromimplements(properties are allowed).\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
This rule enforces thin Components. A Component should contain lifecycle hooks, delegated event handlers, and read-only view properties. Arbitrary business logic should live in a ViewModel, accessed through the Component's vm property.
The rule checks methods inside @Component decorated classes:
constructor, getters, and setters are ignored.implements are allowed (for example, ngOnInit when OnInit is implemented, or ionViewWillEnter when ViewWillEnter is implemented).additionalAllowedMethods are allowed.The rule also reports lifecycle methods that are used without the matching interface being implemented. For example, an ionViewWillEnter method without implements ViewWillEnter is reported.
| Interface | \nMethod | \n
|---|---|
OnChanges | \nngOnChanges | \n
OnInit | \nngOnInit | \n
DoCheck | \nngDoCheck | \n
AfterContentInit | \nngAfterContentInit | \n
AfterContentChecked | \nngAfterContentChecked | \n
AfterViewInit | \nngAfterViewInit | \n
AfterViewChecked | \nngAfterViewChecked | \n
OnDestroy | \nngOnDestroy | \n
ViewWillEnter | \nionViewWillEnter | \n
ViewDidEnter | \nionViewDidEnter | \n
ViewWillLeave | \nionViewWillLeave | \n
ViewDidLeave | \nionViewDidLeave | \n
ViewWillUnload | \nionViewWillUnload | \n
@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n open() {\n launchOtherPage(this.helper, {});\n }\n\n reload() {\n this.vm.reload$.next();\n }\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n ionViewWillEnter() {} // missing implements ViewWillEnter\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage implements ViewWillEnter, ViewWillLeave, OnDestroy {\n readonly vm = new ViewModel(this);\n readonly open = () => launchOtherPage(this.helper, {});\n\n ionViewWillEnter() {\n this.vm.reload$.next();\n }\n\n ionViewWillLeave() {}\n ngOnDestroy() {}\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage implements ViewWillEnter {\n ionViewWillEnter() {}\n\n trackById(_index: number, item: { id: number }) {\n return item.id;\n }\n\n customHook() {}\n}\n{\n \"rules\": {\n \"@rdlabo/rules/no-component-method-except-lifecycle\": [\n \"error\",\n {\n \"additionalAllowedMethods\": [\"trackById\", \"customHook\"]\n }\n ]\n }\n}\n{\n \"rules\": {\n \"@rdlabo/rules/no-component-method-except-lifecycle\": [\n \"error\",\n {\n \"additionalAllowedMethods\": []\n }\n ]\n }\n}\nadditionalAllowedMethodsstring[][]Method names that are allowed in addition to lifecycle methods. Use this for helper methods such as trackById that are part of the Component template contract.
Enable this rule when a project wants Components to stay thin and push logic to ViewModels. It pairs with @rdlabo/rules/require-viewmodel.
\n\nDisallow non-lifecycle methods on
\n@Component. Allowed lifecycle methods are derived fromimplements(properties are allowed).\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
This rule enforces thin Components. A Component should contain lifecycle hooks, delegated event handlers, and read-only view properties. Arbitrary business logic should live in a ViewModel, accessed through the Component's vm property.
The rule checks methods inside @Component decorated classes:
constructor, getters, and setters are ignored.implements are allowed (for example, ngOnInit when OnInit is implemented, or ionViewWillEnter when ViewWillEnter is implemented).additionalAllowedMethods are allowed.The rule also reports lifecycle methods that are used without the matching interface being implemented. For example, an ionViewWillEnter method without implements ViewWillEnter is reported.
| Interface | \nMethod | \n
|---|---|
OnChanges | \nngOnChanges | \n
OnInit | \nngOnInit | \n
DoCheck | \nngDoCheck | \n
AfterContentInit | \nngAfterContentInit | \n
AfterContentChecked | \nngAfterContentChecked | \n
AfterViewInit | \nngAfterViewInit | \n
AfterViewChecked | \nngAfterViewChecked | \n
OnDestroy | \nngOnDestroy | \n
ViewWillEnter | \nionViewWillEnter | \n
ViewDidEnter | \nionViewDidEnter | \n
ViewWillLeave | \nionViewWillLeave | \n
ViewDidLeave | \nionViewDidLeave | \n
ViewWillUnload | \nionViewWillUnload | \n
@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n open() {\n launchOtherPage(this.helper, {});\n }\n\n reload() {\n this.vm.reload$.next();\n }\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n ionViewWillEnter() {} // missing implements ViewWillEnter\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage implements ViewWillEnter, ViewWillLeave, OnDestroy {\n readonly vm = new ViewModel(this);\n readonly open = () => launchOtherPage(this.helper, {});\n\n ionViewWillEnter() {\n this.vm.reload$.next();\n }\n\n ionViewWillLeave() {}\n ngOnDestroy() {}\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage implements ViewWillEnter {\n ionViewWillEnter() {}\n\n trackById(_index: number, item: { id: number }) {\n return item.id;\n }\n\n customHook() {}\n}\n{\n \"rules\": {\n \"@rdlabo/rules/no-component-method-except-lifecycle\": [\n \"error\",\n {\n \"additionalAllowedMethods\": [\"trackById\", \"customHook\"]\n }\n ]\n }\n}\n{\n \"rules\": {\n \"@rdlabo/rules/no-component-method-except-lifecycle\": [\n \"error\",\n {\n \"additionalAllowedMethods\": []\n }\n ]\n }\n}\nadditionalAllowedMethodsstring[][]Method names that are allowed in addition to lifecycle methods. Use this for helper methods such as trackById that are part of the Component template contract.
Enable this rule when a project wants Components to stay thin and push logic to ViewModels. It pairs with @rdlabo/rules/require-viewmodel.
\n\nKeep writable component state in ViewModel, except models passed to Angular Signal Forms
\nform().
This rule enforces a clear boundary between Angular Components and ViewModels. Components should expose read-only derived state to templates; writable state should live in a ViewModel so that changes are centralized and testable. The only writable Signal allowed on a Component is one passed directly to Signal Forms form() as its model.
This rule inspects @Component decorated classes and reports class properties initialized with signal() or linkedSignal() from @angular/core, unless the same property is passed as the first argument to form() from @angular/forms/signals.
computed() and effect() remain Component responsibilities and are not reported.@angular/core and @angular/forms/signals are recognized.The Signal Forms exception only recognizes a Component property initializer such as readonly pageForm = form(this.model). Passing the Signal to form() inside a method does not create an exception, so the writable Signal property is still reported.
import { Component, signal } from '@angular/core';\n\n@Component({ template: '' })\nclass Page {\n readonly isLoading = signal(false); // reported: move to ViewModel\n}\nimport { Component, signal } from '@angular/core';\nimport { form } from '@angular/forms/signals';\n\n@Component({ template: '' })\nclass Page {\n readonly model = signal({ name: '' });\n readonly loading = signal(false); // reported\n readonly pageForm = form(this.model);\n}\nimport { Component, computed } from '@angular/core';\nimport { form } from '@angular/forms/signals';\nimport { PageViewModel } from './page.viewmodel';\n\n@Component({ template: '' })\nclass Page {\n private readonly vm = new PageViewModel(this);\n readonly isLoading = this.vm.isLoading; // read-only view of ViewModel state\n readonly model = this.vm.model;\n readonly pageForm = form(this.model);\n readonly title = computed(() => this.model().name);\n}\nimport { Component, signal as writable } from '@angular/core';\nimport { form as signalForm } from '@angular/forms/signals';\n\n@Component({ template: '' })\nclass Page {\n readonly data = writable({ name: '' });\n readonly pageForm = signalForm(this.data); // data is the Signal Forms model\n}\nThis rule has no options.
\nEnable this rule when a project uses the ViewModel pattern with @rdlabo/rules/require-viewmodel. It ensures that Component properties are read-only views into shared state, which prevents Components from mutating state directly.
\n\nKeep writable component state in ViewModel, except models passed to Angular Signal Forms
\nform().
This rule enforces a clear boundary between Angular Components and ViewModels. Components should expose read-only derived state to templates; writable state should live in a ViewModel so that changes are centralized and testable. The only writable Signal allowed on a Component is one passed directly to Signal Forms form() as its model.
This rule inspects @Component decorated classes and reports class properties initialized with signal() or linkedSignal() from @angular/core, unless the same property is passed as the first argument to form() from @angular/forms/signals.
computed() and effect() remain Component responsibilities and are not reported.@angular/core and @angular/forms/signals are recognized.The Signal Forms exception only recognizes a Component property initializer such as readonly pageForm = form(this.model). Passing the Signal to form() inside a method does not create an exception, so the writable Signal property is still reported.
import { Component, signal } from '@angular/core';\n\n@Component({ template: '' })\nclass Page {\n readonly isLoading = signal(false); // reported: move to ViewModel\n}\nimport { Component, signal } from '@angular/core';\nimport { form } from '@angular/forms/signals';\n\n@Component({ template: '' })\nclass Page {\n readonly model = signal({ name: '' });\n readonly loading = signal(false); // reported\n readonly pageForm = form(this.model);\n}\nimport { Component, computed } from '@angular/core';\nimport { form } from '@angular/forms/signals';\nimport { PageViewModel } from './page.viewmodel';\n\n@Component({ template: '' })\nclass Page {\n private readonly vm = new PageViewModel(this);\n readonly isLoading = this.vm.isLoading; // read-only view of ViewModel state\n readonly model = this.vm.model;\n readonly pageForm = form(this.model);\n readonly title = computed(() => this.model().name);\n}\nimport { Component, signal as writable } from '@angular/core';\nimport { form as signalForm } from '@angular/forms/signals';\n\n@Component({ template: '' })\nclass Page {\n readonly data = writable({ name: '' });\n readonly pageForm = signalForm(this.data); // data is the Signal Forms model\n}\nThis rule has no options.
\nEnable this rule when a project uses the ViewModel pattern with @rdlabo/rules/require-viewmodel. It ensures that Component properties are read-only views into shared state, which prevents Components from mutating state directly.
\n\nDisallow Angular Reactive Forms in favor of Signal Forms.
\n
This rule helps migrate from Angular Reactive Forms to @angular/forms/signals. Reactive Forms require mutable FormControl / FormGroup state that is often shared between components and services, which makes it harder to track where state changes originate. Signal Forms keep form state in Signals, so the dependency graph is explicit and reactive by default.
Use this rule when you want to prevent new Reactive Forms code from being introduced while a project is adopting Signal Forms.
\nThis rule reports three patterns:
\nNamed imports of Reactive Forms APIs from @angular/forms
\nAny import of the following names is reported:
AbstractControl, FormArray, FormArrayName, FormBuilder, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormGroupName, FormRecord, NonNullableFormBuilder, ReactiveFormsModule, UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators.
Namespace or default imports from @angular/forms
\nimport * as forms from '@angular/forms' and import forms from '@angular/forms' are reported because they can bypass the named-API checks.
Reactive Forms template bindings
\nThe following bindings are reported in Angular templates:
\nformControl, formControlName, formGroup, formGroupName, formArrayName.
FormsModule and ngModel are intentionally outside the scope of this rule. Use @rdlabo/rules/no-template-driven-forms to restrict those.
// TypeScript: importing Reactive Forms APIs\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\n\nimport * as forms from '@angular/forms';\nconst control = new forms.FormControl('');\n<!-- Template: Reactive Forms bindings -->\n<form [formGroup]=\"userForm\">\n <input formControlName=\"name\" />\n</form>\nimport { signal } from '@angular/core';\nimport { form, required } from '@angular/forms/signals';\n\nconst userModel = signal({ name: '' });\nconst userForm = form(userModel, (path) => {\n required(path.name);\n});\n<!-- Template: Signal Forms field binding -->\n<input [formField]=\"userForm.name\" />\nThis rule has no options.
\nEnable this rule in Angular projects that have adopted Signal Forms, or in projects that are migrating away from Reactive Forms. It is safe to enable alongside @rdlabo/rules/no-template-driven-forms to cover both form styles.
\n\nDisallow Angular Reactive Forms in favor of Signal Forms.
\n
This rule helps migrate from Angular Reactive Forms to @angular/forms/signals. Reactive Forms require mutable FormControl / FormGroup state that is often shared between components and services, which makes it harder to track where state changes originate. Signal Forms keep form state in Signals, so the dependency graph is explicit and reactive by default.
Use this rule when you want to prevent new Reactive Forms code from being introduced while a project is adopting Signal Forms.
\nThis rule reports three patterns:
\nNamed imports of Reactive Forms APIs from @angular/forms
\nAny import of the following names is reported:
AbstractControl, FormArray, FormArrayName, FormBuilder, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormGroupName, FormRecord, NonNullableFormBuilder, ReactiveFormsModule, UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators.
Namespace or default imports from @angular/forms
\nimport * as forms from '@angular/forms' and import forms from '@angular/forms' are reported because they can bypass the named-API checks.
Reactive Forms template bindings
\nThe following bindings are reported in Angular templates:
\nformControl, formControlName, formGroup, formGroupName, formArrayName.
FormsModule and ngModel are intentionally outside the scope of this rule. Use @rdlabo/rules/no-template-driven-forms to restrict those.
// TypeScript: importing Reactive Forms APIs\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\n\nimport * as forms from '@angular/forms';\nconst control = new forms.FormControl('');\n<!-- Template: Reactive Forms bindings -->\n<form [formGroup]=\"userForm\">\n <input formControlName=\"name\" />\n</form>\nimport { signal } from '@angular/core';\nimport { form, required } from '@angular/forms/signals';\n\nconst userModel = signal({ name: '' });\nconst userForm = form(userModel, (path) => {\n required(path.name);\n});\n<!-- Template: Signal Forms field binding -->\n<input [formField]=\"userForm.name\" />\nThis rule has no options.
\nEnable this rule in Angular projects that have adopted Signal Forms, or in projects that are migrating away from Reactive Forms. It is safe to enable alongside @rdlabo/rules/no-template-driven-forms to cover both form styles.
\n\nDisallow template-driven forms except
\nngModelbindings on explicitly allowed elements.
This rule restricts template-driven forms in Angular templates. ngForm and ngModelGroup are always rejected because they carry mutable form state inside the template. ngModel is also rejected unless it is placed on an element that has been explicitly allowlisted for an Ionic View binding that is not suitable for Signal Forms.
An allowed element is an interoperability exception, not a recommendation to use template-driven forms. Submission forms should use Signal Forms even when they contain an allowed element.
\nThe rule runs against Angular templates and checks three patterns:
\nngModel on an element that is not in allowedElements
\nReports ngModel, [(ngModel)], and [ngModel] on elements whose tag name is not in the allowlist. A standalone (ngModelChange) output is not inspected.
ngModelGroup attribute
\nReports any ngModelGroup attribute on any element.
ngForm reference or directive
\nReports <form #form=\"ngForm\"> and <div ngForm>.
The rule is not a type-aware rule; it operates purely on parsed template AST.
\n<!-- ngModel on an ordinary input -->\n<input [(ngModel)]=\"name\" />\n\n<!-- ngForm reference -->\n<form #form=\"ngForm\"></form>\n\n<!-- ngModelGroup directive -->\n<div ngModelGroup=\"address\"></div>\n<!-- Signal Forms field binding -->\n<input [formField]=\"userForm.name\" />\n\n<!-- ngModel allowed on ion-searchbar for a View binding -->\n<ion-searchbar [(ngModel)]=\"query\"></ion-searchbar>\n{\n \"rules\": {\n \"@rdlabo/rules/no-template-driven-forms\": [\n \"error\",\n {\n \"allowedElements\": [\"ion-searchbar\", \"ion-segment\", \"ion-radio-group\", \"ion-select\", \"ion-range\", \"ion-toggle\", \"ion-checkbox\", \"ion-input-otp\"]\n }\n ]\n }\n}\nallowedElementsstring[][]Element tag names that are permitted to use ngModel. This is intended for Ionic components that expose a value through ngModel as a view convenience, such as ion-searchbar or ion-toggle. Even when an element is allowed, ngModelGroup and ngForm are still reported.
Enable this rule when a project is migrating to Angular Signal Forms but still needs limited ngModel bindings for specific Ionic View components. Disable it only when a project is fully committed to Reactive Forms and does not plan to adopt Signal Forms.
\n\nDisallow template-driven forms except
\nngModelbindings on explicitly allowed elements.
This rule restricts template-driven forms in Angular templates. ngForm and ngModelGroup are always rejected because they carry mutable form state inside the template. ngModel is also rejected unless it is placed on an element that has been explicitly allowlisted for an Ionic View binding that is not suitable for Signal Forms.
An allowed element is an interoperability exception, not a recommendation to use template-driven forms. Submission forms should use Signal Forms even when they contain an allowed element.
\nThe rule runs against Angular templates and checks three patterns:
\nngModel on an element that is not in allowedElements
\nReports ngModel, [(ngModel)], and [ngModel] on elements whose tag name is not in the allowlist. A standalone (ngModelChange) output is not inspected.
ngModelGroup attribute
\nReports any ngModelGroup attribute on any element.
ngForm reference or directive
\nReports <form #form=\"ngForm\"> and <div ngForm>.
The rule is not a type-aware rule; it operates purely on parsed template AST.
\n<!-- ngModel on an ordinary input -->\n<input [(ngModel)]=\"name\" />\n\n<!-- ngForm reference -->\n<form #form=\"ngForm\"></form>\n\n<!-- ngModelGroup directive -->\n<div ngModelGroup=\"address\"></div>\n<!-- Signal Forms field binding -->\n<input [formField]=\"userForm.name\" />\n\n<!-- ngModel allowed on ion-searchbar for a View binding -->\n<ion-searchbar [(ngModel)]=\"query\"></ion-searchbar>\n{\n \"rules\": {\n \"@rdlabo/rules/no-template-driven-forms\": [\n \"error\",\n {\n \"allowedElements\": [\"ion-searchbar\", \"ion-segment\", \"ion-radio-group\", \"ion-select\", \"ion-range\", \"ion-toggle\", \"ion-checkbox\", \"ion-input-otp\"]\n }\n ]\n }\n}\nallowedElementsstring[][]Element tag names that are permitted to use ngModel. This is intended for Ionic components that expose a value through ngModel as a view convenience, such as ion-searchbar or ion-toggle. Even when an element is allowed, ngModelGroup and ngForm are still reported.
Enable this rule when a project is migrating to Angular Signal Forms but still needs limited ngModel bindings for specific Ionic View components. Disable it only when a project is fully committed to Reactive Forms and does not plan to adopt Signal Forms.
\n\nRequire a wrapper method (default: disableHandler($event, work)) on configured element/event bindings to prevent double taps while async work runs
\n\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
When a user taps a button that triggers async work, the control should be disabled until the work settles. Otherwise, a second tap can fire the action again. This rule enforces the wrapper-call syntax for configured (event) bindings. The wrapper implementation is responsible for disabling the UI and handling the work value correctly.
The rule runs on Angular templates. For each BoundEvent that matches a configured target, the handler expression must be a call to a wrapper method with at least two arguments:
$event).For example, (click)=\"vm.disableHandler($event, vm.save())\" is valid. (click)=\"vm.save()\" is reported. The rule does not inspect the second argument's type or verify that it returns a Promise.
The rule also allows bare event method calls such as $event.stopPropagation() and $event.preventDefault() (configurable with allowEventMethods).
By default, the rule targets:
\nclick on <ion-button> and <button>submit on any elementIt ignores .spec.html files.
{\n \"rules\": {\n \"@rdlabo/rules/prefer-disable-handler\": [\n \"error\",\n {\n \"method\": \"disableHandler\",\n \"eventParam\": \"$event\",\n \"targets\": [{ \"events\": [\"click\"], \"elements\": [\"ion-button\", \"button\"] }, { \"events\": [\"submit\"] }],\n \"allowEventMethods\": [\"stopPropagation\", \"preventDefault\"]\n }\n ]\n }\n}\nmethodstring\"disableHandler\"The wrapper method name expected in the handler expression.
\neventParamstring\"$event\"The first argument that must be passed to the wrapper method.
\ntargetsTarget[][{ events: ['click'], elements: ['ion-button', 'button'] }, { events: ['submit'] }]Each target specifies which events and elements require the wrapper. elements is optional; when omitted, the rule applies to any element for those events.
allowEventMethodsstring[][\"stopPropagation\", \"preventDefault\"]Event methods that are allowed without the wrapper. For example, (click)=\"$event.stopPropagation()\" is valid.
<ion-button (click)=\"vm.save()\">Save</ion-button>\n<form (submit)=\"vm.save()\"></form>\n<ion-button (click)=\"vm.disableHandler(vm.save())\">missing $event</ion-button>\n<ion-button (click)=\"vm.disableHandler($event, vm.save())\">Save</ion-button>\n<form (submit)=\"vm.disableHandler($event, vm.save())\">\n <ion-button type=\"submit\">Save</ion-button>\n</form>\n<ion-button (click)=\"$event.stopPropagation()\"></ion-button>\n<ion-input (ionComplete)=\"vm.disableHandler($event, vm.join())\"></ion-input>\n{\n \"rules\": {\n \"@rdlabo/rules/prefer-disable-handler\": [\n \"error\",\n {\n \"targets\": [{ \"events\": [\"ionComplete\"], \"elements\": [\"ion-input\"] }]\n }\n ]\n }\n}\nEnable this rule in Ionic/Angular projects where user actions trigger async operations such as API calls, navigation, or modal presentation. It pairs with @rdlabo/rules/prefer-modal-launcher and @rdlabo/rules/deny-element to keep overlay logic centralized.
\n\nRequire a wrapper method (default: disableHandler($event, work)) on configured element/event bindings to prevent double taps while async work runs
\n\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
When a user taps a button that triggers async work, the control should be disabled until the work settles. Otherwise, a second tap can fire the action again. This rule enforces the wrapper-call syntax for configured (event) bindings. The wrapper implementation is responsible for disabling the UI and handling the work value correctly.
The rule runs on Angular templates. For each BoundEvent that matches a configured target, the handler expression must be a call to a wrapper method with at least two arguments:
$event).For example, (click)=\"vm.disableHandler($event, vm.save())\" is valid. (click)=\"vm.save()\" is reported. The rule does not inspect the second argument's type or verify that it returns a Promise.
The rule also allows bare event method calls such as $event.stopPropagation() and $event.preventDefault() (configurable with allowEventMethods).
By default, the rule targets:
\nclick on <ion-button> and <button>submit on any elementIt ignores .spec.html files.
{\n \"rules\": {\n \"@rdlabo/rules/prefer-disable-handler\": [\n \"error\",\n {\n \"method\": \"disableHandler\",\n \"eventParam\": \"$event\",\n \"targets\": [{ \"events\": [\"click\"], \"elements\": [\"ion-button\", \"button\"] }, { \"events\": [\"submit\"] }],\n \"allowEventMethods\": [\"stopPropagation\", \"preventDefault\"]\n }\n ]\n }\n}\nmethodstring\"disableHandler\"The wrapper method name expected in the handler expression.
\neventParamstring\"$event\"The first argument that must be passed to the wrapper method.
\ntargetsTarget[][{ events: ['click'], elements: ['ion-button', 'button'] }, { events: ['submit'] }]Each target specifies which events and elements require the wrapper. elements is optional; when omitted, the rule applies to any element for those events.
allowEventMethodsstring[][\"stopPropagation\", \"preventDefault\"]Event methods that are allowed without the wrapper. For example, (click)=\"$event.stopPropagation()\" is valid.
<ion-button (click)=\"vm.save()\">Save</ion-button>\n<form (submit)=\"vm.save()\"></form>\n<ion-button (click)=\"vm.disableHandler(vm.save())\">missing $event</ion-button>\n<ion-button (click)=\"vm.disableHandler($event, vm.save())\">Save</ion-button>\n<form (submit)=\"vm.disableHandler($event, vm.save())\">\n <ion-button type=\"submit\">Save</ion-button>\n</form>\n<ion-button (click)=\"$event.stopPropagation()\"></ion-button>\n<ion-input (ionComplete)=\"vm.disableHandler($event, vm.join())\"></ion-input>\n{\n \"rules\": {\n \"@rdlabo/rules/prefer-disable-handler\": [\n \"error\",\n {\n \"targets\": [{ \"events\": [\"ionComplete\"], \"elements\": [\"ion-input\"] }]\n }\n ]\n }\n}\nEnable this rule in Ionic/Angular projects where user actions trigger async operations such as API calls, navigation, or modal presentation. It pairs with @rdlabo/rules/prefer-modal-launcher and @rdlabo/rules/deny-element to keep overlay logic centralized.
\n\nRequire
\npresentModalcalls to live inside alaunch*launcher function.\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
Modals and sheets should be presented through a dedicated launcher function exported from the target page. This keeps call sites decoupled from modal construction details and makes the modal API consistent across the application. This rule ensures that presentModal (or other configured present methods) are only called inside functions whose name matches a launcher pattern.
The rule checks CallExpression nodes for calls such as presentModal, helper.presentModal(...), or overlay.presentSheet(...). If the call is not inside a launcher function, it is reported.
A launcher function is one whose name matches the configured regular expression (default ^launch). The rule looks at:
function launchXxx(...)const launchXxx = (...)class Foo { launchXxx = (...) }class Foo { launchXxx() {} }run arrow inside launchExamplePage is allowed.{\n \"rules\": {\n \"@rdlabo/rules/prefer-modal-launcher\": [\n \"error\",\n {\n \"presentMethodNames\": [\"presentModal\"],\n \"launcherNamePattern\": \"^launch\"\n }\n ]\n }\n}\npresentMethodNamesstring[][\"presentModal\"]The present method names to restrict.
\nlauncherNamePatternstring\"^launch\"A regular expression string. Present method calls must be inside a function whose name matches this pattern.
\nexport class ExamplePage {\n readonly helper = inject(HelperService);\n\n async open() {\n await this.helper.presentModal(OtherPage, {}); // not in a launcher\n }\n}\nexport class ExamplePage {\n readonly launchOtherPage = this.helper.presentModal(OtherPage, {}); // not a function\n}\nexport async function openModal(overlay: Helper) {\n await overlay.presentModal(ExamplePage, {}); // name does not match ^launch\n}\nexport const launchExamplePage = (overlay: Helper, props: Props) => {\n return overlay.presentModal(ExamplePage, props);\n};\nexport function launchExamplePage(overlay: Helper, props: Props) {\n return overlay.presentModal(ExamplePage, props);\n}\nexport const launchExamplePage = (overlay: Helper, props: Props) => {\n const run = () => overlay.presentModal(ExamplePage, props);\n return run();\n};\nexport const openSheet = (overlay: Helper) => {\n return overlay.presentSheet(SheetPage, {});\n};\n{\n \"rules\": {\n \"@rdlabo/rules/prefer-modal-launcher\": [\n \"error\",\n {\n \"presentMethodNames\": [\"presentSheet\"],\n \"launcherNamePattern\": \"^(launch|open)\"\n }\n ]\n }\n}\nEnable this rule in Ionic/Angular projects that use a launcher pattern for modals, sheets, and other overlays. It pairs with @rdlabo/rules/deny-element and @rdlabo/rules/prefer-disable-handler.
\n\nRequire
\npresentModalcalls to live inside alaunch*launcher function.\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
Modals and sheets should be presented through a dedicated launcher function exported from the target page. This keeps call sites decoupled from modal construction details and makes the modal API consistent across the application. This rule ensures that presentModal (or other configured present methods) are only called inside functions whose name matches a launcher pattern.
The rule checks CallExpression nodes for calls such as presentModal, helper.presentModal(...), or overlay.presentSheet(...). If the call is not inside a launcher function, it is reported.
A launcher function is one whose name matches the configured regular expression (default ^launch). The rule looks at:
function launchXxx(...)const launchXxx = (...)class Foo { launchXxx = (...) }class Foo { launchXxx() {} }run arrow inside launchExamplePage is allowed.{\n \"rules\": {\n \"@rdlabo/rules/prefer-modal-launcher\": [\n \"error\",\n {\n \"presentMethodNames\": [\"presentModal\"],\n \"launcherNamePattern\": \"^launch\"\n }\n ]\n }\n}\npresentMethodNamesstring[][\"presentModal\"]The present method names to restrict.
\nlauncherNamePatternstring\"^launch\"A regular expression string. Present method calls must be inside a function whose name matches this pattern.
\nexport class ExamplePage {\n readonly helper = inject(HelperService);\n\n async open() {\n await this.helper.presentModal(OtherPage, {}); // not in a launcher\n }\n}\nexport class ExamplePage {\n readonly launchOtherPage = this.helper.presentModal(OtherPage, {}); // not a function\n}\nexport async function openModal(overlay: Helper) {\n await overlay.presentModal(ExamplePage, {}); // name does not match ^launch\n}\nexport const launchExamplePage = (overlay: Helper, props: Props) => {\n return overlay.presentModal(ExamplePage, props);\n};\nexport function launchExamplePage(overlay: Helper, props: Props) {\n return overlay.presentModal(ExamplePage, props);\n}\nexport const launchExamplePage = (overlay: Helper, props: Props) => {\n const run = () => overlay.presentModal(ExamplePage, props);\n return run();\n};\nexport const openSheet = (overlay: Helper) => {\n return overlay.presentSheet(SheetPage, {});\n};\n{\n \"rules\": {\n \"@rdlabo/rules/prefer-modal-launcher\": [\n \"error\",\n {\n \"presentMethodNames\": [\"presentSheet\"],\n \"launcherNamePattern\": \"^(launch|open)\"\n }\n ]\n }\n}\nEnable this rule in Ionic/Angular projects that use a launcher pattern for modals, sheets, and other overlays. It pairs with @rdlabo/rules/deny-element and @rdlabo/rules/prefer-disable-handler.
\n\nEnforce Component
\nnew ViewModel(this),ViewModelStore<ComponentType, Keys>inheritance, and keep View APIs off ViewModel.\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
This rule enforces the ViewModel architecture pattern. An Angular Component must own a ViewModel initialized with new ViewModel(this). The rule requires at least one matching property; it does not reject additional ViewModel instances. The ViewModel must extend ViewModelStore<ComponentType> and should not redeclare host or contain View-specific APIs such as viewChild, effect, computed, or afterNextRender.
The rule performs three checks:
\nA @Component class must contain a property initialized with new ViewModel(this). The first argument of the constructor call must be this.
ViewModelStore<ComponentType>The class named ViewModel (or the configured viewModelClassName) must extend ViewModelStore<...> or a base whose name ends with ViewModel or is ModelSearch. The first generic argument must be the host Component type. Intermediate generic defaults are resolved.
ViewModelStore<ExamplePage, 'model' | 'form'> is used, the second and later type arguments are allowed.ViewModelStore directly is reported.The ViewModel class must not call the following APIs:
\nviewChild, viewChildren, contentChild, contentChildren, effect, computed, afterNextRender, afterEveryRender, afterRenderEffect.
This list can be customized with the bannedApis option. The rule recognizes direct calls such as viewChild() and the .required() variant such as viewChild.required(). It does not resolve namespace-prefixed calls.
@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly title = 'x'; // no ViewModel\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(); // missing `this`\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends StoreModel {} // wrong base class\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends ViewModelStore<ExamplePage> {\n readonly el = viewChild('host'); // View API in ViewModel\n}\nimport { Component, computed, effect, viewChild } from '@angular/core';\n\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n readonly title = computed(() => this.vm.label());\n readonly el = viewChild('host');\n\n constructor() {\n effect(() => this.vm.label());\n }\n}\n\nclass ViewModel extends ViewModelStore<ExamplePage> {\n readonly label = signal('hello');\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends ViewModelStore<ExamplePage, 'inventoryModel'> {\n readonly inventoryModel = signal<Inventory | null>(null);\n}\n@Component({ selector: 'app-example', template: '' })\nexport class FoodsPage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends MainViewModel<FoodsPage> {}\n{\n \"rules\": {\n \"@rdlabo/rules/require-viewmodel\": [\n \"error\",\n {\n \"viewModelClassName\": \"ViewModel\",\n \"viewModelStoreClassName\": \"ViewModelStore\",\n \"bannedApis\": [\n \"viewChild\",\n \"viewChildren\",\n \"contentChild\",\n \"contentChildren\",\n \"effect\",\n \"computed\",\n \"afterNextRender\",\n \"afterEveryRender\",\n \"afterRenderEffect\"\n ]\n }\n ]\n }\n}\nviewModelClassNamestring\"ViewModel\"The class name the rule looks for in the Component. Use this when the project uses a different naming convention, such as PageState.
viewModelStoreClassNamestring\"ViewModelStore\"The base class name the ViewModel must extend, or an intermediate base whose name ends with ViewModel.
bannedApisstring[]APIs that are not allowed inside the ViewModel. The rule detects direct calls and .required(...) usage; namespace-prefixed calls are not resolved.
Enable this rule when a project adopts the ViewModel pattern with @rdlabo/ionic-angular-kit or a similar architecture. It pairs with @rdlabo/rules/no-component-writable-signal to keep Component state read-only and ViewModel state writable.
\n\nEnforce Component
\nnew ViewModel(this),ViewModelStore<ComponentType, Keys>inheritance, and keep View APIs off ViewModel.\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
This rule enforces the ViewModel architecture pattern. An Angular Component must own a ViewModel initialized with new ViewModel(this). The rule requires at least one matching property; it does not reject additional ViewModel instances. The ViewModel must extend ViewModelStore<ComponentType> and should not redeclare host or contain View-specific APIs such as viewChild, effect, computed, or afterNextRender.
The rule performs three checks:
\nA @Component class must contain a property initialized with new ViewModel(this). The first argument of the constructor call must be this.
ViewModelStore<ComponentType>The class named ViewModel (or the configured viewModelClassName) must extend ViewModelStore<...> or a base whose name ends with ViewModel or is ModelSearch. The first generic argument must be the host Component type. Intermediate generic defaults are resolved.
ViewModelStore<ExamplePage, 'model' | 'form'> is used, the second and later type arguments are allowed.ViewModelStore directly is reported.The ViewModel class must not call the following APIs:
\nviewChild, viewChildren, contentChild, contentChildren, effect, computed, afterNextRender, afterEveryRender, afterRenderEffect.
This list can be customized with the bannedApis option. The rule recognizes direct calls such as viewChild() and the .required() variant such as viewChild.required(). It does not resolve namespace-prefixed calls.
@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly title = 'x'; // no ViewModel\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(); // missing `this`\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends StoreModel {} // wrong base class\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends ViewModelStore<ExamplePage> {\n readonly el = viewChild('host'); // View API in ViewModel\n}\nimport { Component, computed, effect, viewChild } from '@angular/core';\n\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n readonly title = computed(() => this.vm.label());\n readonly el = viewChild('host');\n\n constructor() {\n effect(() => this.vm.label());\n }\n}\n\nclass ViewModel extends ViewModelStore<ExamplePage> {\n readonly label = signal('hello');\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends ViewModelStore<ExamplePage, 'inventoryModel'> {\n readonly inventoryModel = signal<Inventory | null>(null);\n}\n@Component({ selector: 'app-example', template: '' })\nexport class FoodsPage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends MainViewModel<FoodsPage> {}\n{\n \"rules\": {\n \"@rdlabo/rules/require-viewmodel\": [\n \"error\",\n {\n \"viewModelClassName\": \"ViewModel\",\n \"viewModelStoreClassName\": \"ViewModelStore\",\n \"bannedApis\": [\n \"viewChild\",\n \"viewChildren\",\n \"contentChild\",\n \"contentChildren\",\n \"effect\",\n \"computed\",\n \"afterNextRender\",\n \"afterEveryRender\",\n \"afterRenderEffect\"\n ]\n }\n ]\n }\n}\nviewModelClassNamestring\"ViewModel\"The class name the rule looks for in the Component. Use this when the project uses a different naming convention, such as PageState.
viewModelStoreClassNamestring\"ViewModelStore\"The base class name the ViewModel must extend, or an intermediate base whose name ends with ViewModel.
bannedApisstring[]APIs that are not allowed inside the ViewModel. The rule detects direct calls and .required(...) usage; namespace-prefixed calls are not resolved.
Enable this rule when a project adopts the ViewModel pattern with @rdlabo/ionic-angular-kit or a similar architecture. It pairs with @rdlabo/rules/no-component-writable-signal to keep Component state read-only and ViewModel state writable.
\n\nRequire () when accessing Angular Signals in templates
\n\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
Angular Signals are functions. In a template, a Signal must be called with () to read its current value. Forgetting the parentheses is a common mistake when migrating from RxJS BehaviorSubject or from model() inputs. This rule detects Signal identifiers in Angular templates and reports bare reads such as {{ count }} or [hidden]=\"count\".
The rule parses the Angular template of each @Component. It collects Signal identifiers from:
signal, model, computed, linkedSignal, input, or toSignal.count = { first: signal(0) }).Detection is name-based and does not resolve import provenance. Aliased factory imports are not recognized, while an unrelated local function with one of these names may be treated as a Signal factory. toSignal is commonly imported from @angular/core/rxjs-interop; the rule recognizes it by name rather than module.
It then reports any place in the template where the Signal is read without (). This includes:
{{ count }}[hidden]=\"count\"@if (count), @switch (count), @for (...; track count)count?.signalcount | asyncThe rule supports both template and templateUrl components.
<div>{{ count }}</div>\n<child [hidden]=\"count > 0\"></child>\n@if (count) {\n<div>Positive</div>\n}\n<ion-input [formField]=\"count.first\"></ion-input>\n<div>{{ count() }}</div>\n<child [hidden]=\"count() > 0\"></child>\n@if (count()) {\n<div>Positive</div>\n}\n<ion-input [formField]=\"count.first()\"></ion-input>\nIf a child component expects a Signal object (not its value), you can pass the reference without ():
<child [inventorySignal]=\"inventorySignal\"></child>\nThe rule recognizes this case and does not report a bare Signal passed as a bound attribute.
\nThis rule has no options.
\nEnable this rule in any Angular project that uses Signals. It is especially useful during migration from Observable-based code or when model() and input() are introduced, because those APIs return Signal-like objects that must be called in the template.
\n\nRequire () when accessing Angular Signals in templates
\n\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.
Angular Signals are functions. In a template, a Signal must be called with () to read its current value. Forgetting the parentheses is a common mistake when migrating from RxJS BehaviorSubject or from model() inputs. This rule detects Signal identifiers in Angular templates and reports bare reads such as {{ count }} or [hidden]=\"count\".
The rule parses the Angular template of each @Component. It collects Signal identifiers from:
signal, model, computed, linkedSignal, input, or toSignal.count = { first: signal(0) }).Detection is name-based and does not resolve import provenance. Aliased factory imports are not recognized, while an unrelated local function with one of these names may be treated as a Signal factory. toSignal is commonly imported from @angular/core/rxjs-interop; the rule recognizes it by name rather than module.
It then reports any place in the template where the Signal is read without (). This includes:
{{ count }}[hidden]=\"count\"@if (count), @switch (count), @for (...; track count)count?.signalcount | asyncThe rule supports both template and templateUrl components.
<div>{{ count }}</div>\n<child [hidden]=\"count > 0\"></child>\n@if (count) {\n<div>Positive</div>\n}\n<ion-input [formField]=\"count.first\"></ion-input>\n<div>{{ count() }}</div>\n<child [hidden]=\"count() > 0\"></child>\n@if (count()) {\n<div>Positive</div>\n}\n<ion-input [formField]=\"count.first()\"></ion-input>\nIf a child component expects a Signal object (not its value), you can pass the reference without ():
<child [inventorySignal]=\"inventorySignal\"></child>\nThe rule recognizes this case and does not report a bare Signal passed as a bound attribute.
\nThis rule has no options.
\nEnable this rule in any Angular project that uses Signals. It is especially useful during migration from Observable-based code or when model() and input() are introduced, because those APIs return Signal-like objects that must be called in the template.
\n\nThis plugin check to valid signal use as signal.
\n\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.- ✒️ The
\n--fixoption on the command line can automatically fix some of the problems reported by this rule.
Angular Signals are getter functions. Reading them requires (), and writing them must go through .set() or .update(). This rule catches code that uses a Signal variable as if it were a plain value, and it can auto-fix many common mistakes.
The rule tracks class properties initialized with Signal factories (signal, model, input, linkedSignal, toSignal, asReadonly) and reports misuse such as:
this.count instead of this.count() in an expression contextthis.count() = value instead of this.count.set(value)this.user().name = 'Jane' instead of this.user.update(user => ({ ...user, name: 'Jane' }))this.items().push(x) instead of this.items.update(items => { items.push(x); return items; })this.#user = value (direct assignment to a Signal property) instead of this.#user.set(value)The rule distinguishes between contexts where a Signal reference is expected and contexts where its value is expected. For example, passing a Signal object as a prop is allowed:
\nconst props = { food: this.food };\nlaunchModal({ food: this.food });\nexport class SigninPage {\n readonly #id = signal<number | undefined>(undefined);\n\n constructor() {\n this.#id = 1;\n }\n\n useMethod() {\n if (this.#id) {\n this.#id().hoge = 1;\n }\n }\n}\nexport class SigninPage {\n readonly #user = signal<{ name: string }>({ name: 'John' });\n\n updateUser() {\n this.#user().name = 'Jane';\n }\n}\nexport class SigninPage {\n readonly #numbers = signal<number[]>([1, 2, 3]);\n\n updateNumbers() {\n this.#numbers().push(4);\n }\n}\nexport class SigninPage {\n readonly #value = signal<number>(0);\n\n updateValue() {\n this.#value() = 42;\n }\n}\nexport class SigninPage {\n readonly #user = signal<{ name: string }>({ name: 'John' });\n\n updateUser() {\n this.#user.update((user) => ({ ...user, name: 'Jane' }));\n }\n}\nexport class SigninPage {\n readonly #numbers = signal<number[]>([1, 2, 3]);\n\n updateNumbers() {\n this.#numbers.update((numbers) => {\n numbers.push(4);\n return numbers;\n });\n }\n}\nexport class SigninPage {\n readonly #value = signal<number>(0);\n\n updateValue() {\n this.#value.set(42);\n }\n}\nexport class SigninPage {\n readonly food = signal<number>(0);\n\n openPreview() {\n const props = { food: this.food };\n launchModal({ food: this.food });\n }\n}\nThe rule provides auto-fix for the patterns above:
\nthis.count = value -> this.count.set(value)this.count() = value -> this.count.set(value)this.count().x = value -> this.count.update(value => ({ ...value, x: value }))this.count().push(x) -> this.count.update(value => { value.push(x); return value; })This rule has no options.
\nEnable this rule in any Angular project that uses Signals. It is complementary to @rdlabo/rules/signal-use-as-signal-template, which checks Signal usage in templates.
\n\nThis plugin check to valid signal use as signal.
\n\n
\n- ⭐️ This rule is included in Flat Config
\nrdlabo.configs.recommended.- ✒️ The
\n--fixoption on the command line can automatically fix some of the problems reported by this rule.
Angular Signals are getter functions. Reading them requires (), and writing them must go through .set() or .update(). This rule catches code that uses a Signal variable as if it were a plain value, and it can auto-fix many common mistakes.
The rule tracks class properties initialized with Signal factories (signal, model, input, linkedSignal, toSignal, asReadonly) and reports misuse such as:
this.count instead of this.count() in an expression contextthis.count() = value instead of this.count.set(value)this.user().name = 'Jane' instead of this.user.update(user => ({ ...user, name: 'Jane' }))this.items().push(x) instead of this.items.update(items => { items.push(x); return items; })this.#user = value (direct assignment to a Signal property) instead of this.#user.set(value)The rule distinguishes between contexts where a Signal reference is expected and contexts where its value is expected. For example, passing a Signal object as a prop is allowed:
\nconst props = { food: this.food };\nlaunchModal({ food: this.food });\nexport class SigninPage {\n readonly #id = signal<number | undefined>(undefined);\n\n constructor() {\n this.#id = 1;\n }\n\n useMethod() {\n if (this.#id) {\n this.#id().hoge = 1;\n }\n }\n}\nexport class SigninPage {\n readonly #user = signal<{ name: string }>({ name: 'John' });\n\n updateUser() {\n this.#user().name = 'Jane';\n }\n}\nexport class SigninPage {\n readonly #numbers = signal<number[]>([1, 2, 3]);\n\n updateNumbers() {\n this.#numbers().push(4);\n }\n}\nexport class SigninPage {\n readonly #value = signal<number>(0);\n\n updateValue() {\n this.#value() = 42;\n }\n}\nexport class SigninPage {\n readonly #user = signal<{ name: string }>({ name: 'John' });\n\n updateUser() {\n this.#user.update((user) => ({ ...user, name: 'Jane' }));\n }\n}\nexport class SigninPage {\n readonly #numbers = signal<number[]>([1, 2, 3]);\n\n updateNumbers() {\n this.#numbers.update((numbers) => {\n numbers.push(4);\n return numbers;\n });\n }\n}\nexport class SigninPage {\n readonly #value = signal<number>(0);\n\n updateValue() {\n this.#value.set(42);\n }\n}\nexport class SigninPage {\n readonly food = signal<number>(0);\n\n openPreview() {\n const props = { food: this.food };\n launchModal({ food: this.food });\n }\n}\nThe rule provides auto-fix for the patterns above:
\nthis.count = value -> this.count.set(value)this.count() = value -> this.count.set(value)this.count().x = value -> this.count.update(value => ({ ...value, x: value }))this.count().push(x) -> this.count.update(value => { value.push(x); return value; })This rule has no options.
\nEnable this rule in any Angular project that uses Signals. It is complementary to @rdlabo/rules/signal-use-as-signal-template, which checks Signal usage in templates.
\n\nこのプラグインは特定のHTMLタグの使用を禁止します。
\n\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。
このルールは、Angular templateで特定のelementが使われることを防ぎます。一般的には、templateで宣言する代わりにlauncher methodや専用serviceを通じて表示すべき <ion-modal>、<ion-popover>、<ion-toast>、<ion-alert>、<ion-loading>、<ion-picker>、<ion-action-sheet> などのinline overlay componentを禁止するために使います。
このルールは .html template fileで実行され、tag nameが設定済みの elements listに含まれるelementを報告します。template ASTを走査し、@if、@for、@else と、ネストした then / else branchなどのAngular control flow構文にも対応します。
.spec.html fileは無視します。elements arrayが必須です。{\n \"rules\": {\n \"@rdlabo/rules/deny-element\": [\n \"error\",\n {\n \"elements\": [\"ion-modal\", \"ion-popover\", \"ion-toast\", \"ion-alert\", \"ion-loading\", \"ion-picker\", \"ion-action-sheet\"]\n }\n ]\n }\n}\nelementsstring[]ion-modal, ion-popover, ion-toast, ion-alert, ion-loading, ion-picker, ion-action-sheet禁止するelement tag nameの配列です。このルールはこれらの名前をAngular template ASTの Element node typeと比較するため、element自体とcontrol flow branch内の存在の両方を検査します。
<ion-modal></ion-modal>\n\n<div>\n <ion-toast></ion-toast>\n <ion-alert></ion-alert>\n</div>\n@if (showModal) {\n<ion-modal>Modal content</ion-modal>\n}\n<ion-button (click)=\"presentModal()\">Open</ion-button>\n@for (item of items; track item.id) {\n<ion-card>\n <ion-card-header>{{ item.name }}</ion-card-header>\n</ion-card>\n}\noverlayにlauncher patternを使うプロジェクトで、このルールを有効にします。@rdlabo/rules/prefer-modal-launcherおよび@rdlabo/rules/prefer-disable-handlerと組み合わせることで、modalとoverlayのlogicをtemplateから分離できます。
\n\nこのプラグインは特定のHTMLタグの使用を禁止します。
\n\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。
このルールは、Angular templateで特定のelementが使われることを防ぎます。一般的には、templateで宣言する代わりにlauncher methodや専用serviceを通じて表示すべき <ion-modal>、<ion-popover>、<ion-toast>、<ion-alert>、<ion-loading>、<ion-picker>、<ion-action-sheet> などのinline overlay componentを禁止するために使います。
このルールは .html template fileで実行され、tag nameが設定済みの elements listに含まれるelementを報告します。template ASTを走査し、@if、@for、@else と、ネストした then / else branchなどのAngular control flow構文にも対応します。
.spec.html fileは無視します。elements arrayが必須です。{\n \"rules\": {\n \"@rdlabo/rules/deny-element\": [\n \"error\",\n {\n \"elements\": [\"ion-modal\", \"ion-popover\", \"ion-toast\", \"ion-alert\", \"ion-loading\", \"ion-picker\", \"ion-action-sheet\"]\n }\n ]\n }\n}\nelementsstring[]ion-modal, ion-popover, ion-toast, ion-alert, ion-loading, ion-picker, ion-action-sheet禁止するelement tag nameの配列です。このルールはこれらの名前をAngular template ASTの Element node typeと比較するため、element自体とcontrol flow branch内の存在の両方を検査します。
<ion-modal></ion-modal>\n\n<div>\n <ion-toast></ion-toast>\n <ion-alert></ion-alert>\n</div>\n@if (showModal) {\n<ion-modal>Modal content</ion-modal>\n}\n<ion-button (click)=\"presentModal()\">Open</ion-button>\n@for (item of items; track item.id) {\n<ion-card>\n <ion-card-header>{{ item.name }}</ion-card-header>\n</ion-card>\n}\noverlayにlauncher patternを使うプロジェクトで、このルールを有効にします。@rdlabo/rules/prefer-modal-launcherおよび@rdlabo/rules/prefer-disable-handlerと組み合わせることで、modalとoverlayのlogicをtemplateから分離できます。
\n\nModalController / PopoverControllerの
\n.create()を禁止し、launcher経由でoverlayを開く。\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。
このルールは、controllerの .create() 呼び出しによるIonic overlayの直接生成を防ぎます。rdlabo architectureでは、overlayはlauncher functionと共有の presentModal / presentPopover helperを通じて開きます。これによりoverlay logicを一元化し、呼び出し側をcontroller APIから分離できます。
receiverが ModalController、PopoverController（または設定した他のcontroller）である .create() 呼び出しを検出します。次のような複数のpatternからcontrollerを解決します。
this.modalCtrl.create()modalCtrl.create()（modalCtrl が inject(ModalController) の場合）inject(ModalController).create()constructor(private modalCtrl: ModalController)ModalController 型のclass propertyLoadingController、AlertController、ToastController、ActionSheetController など、その他のoverlay controllerは直接使うことが意図されている場合があるため、デフォルトでは禁止しません。
{\n \"rules\": {\n \"@rdlabo/rules/deny-overlay-create\": [\n \"error\",\n {\n \"deny\": [\"ModalController\", \"PopoverController\"]\n }\n ]\n }\n}\ndenystring[][\"ModalController\", \"PopoverController\"].create() 呼び出しを禁止するcontroller class nameです。空の配列を指定するとルールを無効にできます。
export class ExamplePage {\n readonly #modalCtrl = inject(ModalController);\n\n async open() {\n await this.#modalCtrl.create({ component: OtherPage });\n }\n}\nexport async function open(modalCtrl: ModalController) {\n await modalCtrl.create({ component: OtherPage });\n}\nexport class ExamplePage {\n constructor(private modalCtrl: ModalController) {}\n\n async open() {\n await this.modalCtrl.create({ component: OtherPage });\n }\n}\nexport const launchOtherPage = (overlay: Helper, props: Props) => {\n return overlay.presentModal(OtherPage, props);\n};\nexport class ExamplePage {\n readonly #loadingCtrl = inject(LoadingController);\n\n async showLoading() {\n await this.#loadingCtrl.create({ message: '...' });\n }\n}\nexport class ExamplePage {\n readonly #modalCtrl = inject(ModalController);\n\n dismiss(data?: unknown) {\n this.#modalCtrl.dismiss(data);\n }\n}\nlauncher patternと共有overlay helperを使うIonicプロジェクトで、このルールを有効にします。@rdlabo/rules/prefer-modal-launcherおよび@rdlabo/rules/deny-elementと組み合わせて使います。
\n\nModalController / PopoverControllerの
\n.create()を禁止し、launcher経由でoverlayを開く。\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。
このルールは、controllerの .create() 呼び出しによるIonic overlayの直接生成を防ぎます。rdlabo architectureでは、overlayはlauncher functionと共有の presentModal / presentPopover helperを通じて開きます。これによりoverlay logicを一元化し、呼び出し側をcontroller APIから分離できます。
receiverが ModalController、PopoverController（または設定した他のcontroller）である .create() 呼び出しを検出します。次のような複数のpatternからcontrollerを解決します。
this.modalCtrl.create()modalCtrl.create()（modalCtrl が inject(ModalController) の場合）inject(ModalController).create()constructor(private modalCtrl: ModalController)ModalController 型のclass propertyLoadingController、AlertController、ToastController、ActionSheetController など、その他のoverlay controllerは直接使うことが意図されている場合があるため、デフォルトでは禁止しません。
{\n \"rules\": {\n \"@rdlabo/rules/deny-overlay-create\": [\n \"error\",\n {\n \"deny\": [\"ModalController\", \"PopoverController\"]\n }\n ]\n }\n}\ndenystring[][\"ModalController\", \"PopoverController\"].create() 呼び出しを禁止するcontroller class nameです。空の配列を指定するとルールを無効にできます。
export class ExamplePage {\n readonly #modalCtrl = inject(ModalController);\n\n async open() {\n await this.#modalCtrl.create({ component: OtherPage });\n }\n}\nexport async function open(modalCtrl: ModalController) {\n await modalCtrl.create({ component: OtherPage });\n}\nexport class ExamplePage {\n constructor(private modalCtrl: ModalController) {}\n\n async open() {\n await this.modalCtrl.create({ component: OtherPage });\n }\n}\nexport const launchOtherPage = (overlay: Helper, props: Props) => {\n return overlay.presentModal(OtherPage, props);\n};\nexport class ExamplePage {\n readonly #loadingCtrl = inject(LoadingController);\n\n async showLoading() {\n await this.#loadingCtrl.create({ message: '...' });\n }\n}\nexport class ExamplePage {\n readonly #modalCtrl = inject(ModalController);\n\n dismiss(data?: unknown) {\n this.#modalCtrl.dismiss(data);\n }\n}\nlauncher patternと共有overlay helperを使うIonicプロジェクトで、このルールを有効にします。@rdlabo/rules/prefer-modal-launcherおよび@rdlabo/rules/deny-elementと組み合わせて使います。
\n\n書き込み可能なComponent状態はViewModelに置く。ただしAngular Signal Formsの
\nform()に渡すmodelは例外とする。
このルールは、Angular ComponentとViewModelの間に明確な境界を強制します。Componentはtemplateに読み取り専用の派生状態を公開し、書き込み可能な状態はViewModelに置くことで、変更を一元化しtest可能にします。Componentで許可される唯一の書き込み可能なSignalは、Signal Formsの form() にmodelとして直接渡されるものです。
@Component で装飾されたクラスを検査し、@angular/forms/signals の form() の第1引数に同じpropertyが渡されている場合を除き、@angular/core の signal() または linkedSignal() で初期化されたclass propertyを報告します。
computed() と effect() は引き続きComponentの責務であり、報告しません。@angular/core と @angular/forms/signals のalias importとnamespace importを認識します。Signal Formsの例外は、readonly pageForm = form(this.model) のようなComponent property initializerだけを認識します。method内でSignalを form() に渡しても例外にはならないため、書き込み可能なSignal propertyは引き続き報告されます。
import { Component, signal } from '@angular/core';\n\n@Component({ template: '' })\nclass Page {\n readonly isLoading = signal(false); // reported: move to ViewModel\n}\nimport { Component, signal } from '@angular/core';\nimport { form } from '@angular/forms/signals';\n\n@Component({ template: '' })\nclass Page {\n readonly model = signal({ name: '' });\n readonly loading = signal(false); // reported\n readonly pageForm = form(this.model);\n}\nimport { Component, computed } from '@angular/core';\nimport { form } from '@angular/forms/signals';\nimport { PageViewModel } from './page.viewmodel';\n\n@Component({ template: '' })\nclass Page {\n private readonly vm = new PageViewModel(this);\n readonly isLoading = this.vm.isLoading; // read-only view of ViewModel state\n readonly model = this.vm.model;\n readonly pageForm = form(this.model);\n readonly title = computed(() => this.model().name);\n}\nimport { Component, signal as writable } from '@angular/core';\nimport { form as signalForm } from '@angular/forms/signals';\n\n@Component({ template: '' })\nclass Page {\n readonly data = writable({ name: '' });\n readonly pageForm = signalForm(this.data); // data is the Signal Forms model\n}\nこのルールにオプションはありません。
\n@rdlabo/rules/require-viewmodel とともにViewModel patternを使うプロジェクトで、このルールを有効にします。Component propertyを共有状態への読み取り専用viewにすることで、Componentによる状態の直接変更を防ぎます。
\n\n書き込み可能なComponent状態はViewModelに置く。ただしAngular Signal Formsの
\nform()に渡すmodelは例外とする。
このルールは、Angular ComponentとViewModelの間に明確な境界を強制します。Componentはtemplateに読み取り専用の派生状態を公開し、書き込み可能な状態はViewModelに置くことで、変更を一元化しtest可能にします。Componentで許可される唯一の書き込み可能なSignalは、Signal Formsの form() にmodelとして直接渡されるものです。
@Component で装飾されたクラスを検査し、@angular/forms/signals の form() の第1引数に同じpropertyが渡されている場合を除き、@angular/core の signal() または linkedSignal() で初期化されたclass propertyを報告します。
computed() と effect() は引き続きComponentの責務であり、報告しません。@angular/core と @angular/forms/signals のalias importとnamespace importを認識します。Signal Formsの例外は、readonly pageForm = form(this.model) のようなComponent property initializerだけを認識します。method内でSignalを form() に渡しても例外にはならないため、書き込み可能なSignal propertyは引き続き報告されます。
import { Component, signal } from '@angular/core';\n\n@Component({ template: '' })\nclass Page {\n readonly isLoading = signal(false); // reported: move to ViewModel\n}\nimport { Component, signal } from '@angular/core';\nimport { form } from '@angular/forms/signals';\n\n@Component({ template: '' })\nclass Page {\n readonly model = signal({ name: '' });\n readonly loading = signal(false); // reported\n readonly pageForm = form(this.model);\n}\nimport { Component, computed } from '@angular/core';\nimport { form } from '@angular/forms/signals';\nimport { PageViewModel } from './page.viewmodel';\n\n@Component({ template: '' })\nclass Page {\n private readonly vm = new PageViewModel(this);\n readonly isLoading = this.vm.isLoading; // read-only view of ViewModel state\n readonly model = this.vm.model;\n readonly pageForm = form(this.model);\n readonly title = computed(() => this.model().name);\n}\nimport { Component, signal as writable } from '@angular/core';\nimport { form as signalForm } from '@angular/forms/signals';\n\n@Component({ template: '' })\nclass Page {\n readonly data = writable({ name: '' });\n readonly pageForm = signalForm(this.data); // data is the Signal Forms model\n}\nこのルールにオプションはありません。
\n@rdlabo/rules/require-viewmodel とともにViewModel patternを使うプロジェクトで、このルールを有効にします。Component propertyを共有状態への読み取り専用viewにすることで、Componentによる状態の直接変更を防ぎます。
\n\nAngular Reactive Formsを禁止し、Signal Formsを推奨する。
\n
このルールは、Angular Reactive Formsから @angular/forms/signals への移行を支援します。Reactive Formsでは、Componentとservice間で共有されることの多い書き込み可能な FormControl / FormGroup 状態が必要なため、状態変更の発生元を追いにくくなります。Signal Formsではform状態をSignalsに保持するため、依存graphが明示的になり、デフォルトでreactiveになります。
プロジェクトがSignal Formsを採用する間に、新しいReactive Forms codeが追加されるのを防ぎたい場合に使います。
\nこのルールは3つのpatternを報告します。
\n@angular/forms からのReactive Forms APIのnamed import
\n次の名前のimportをすべて報告します。
AbstractControl, FormArray, FormArrayName, FormBuilder, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormGroupName, FormRecord, NonNullableFormBuilder, ReactiveFormsModule, UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators.
@angular/forms からのnamespace importまたはdefault import
\nnamed APIの検査を迂回できるため、import * as forms from '@angular/forms' と import forms from '@angular/forms' を報告します。
Reactive Formsのtemplate binding
\nAngular templateで次のbindingを報告します。
\nformControl, formControlName, formGroup, formGroupName, formArrayName.
FormsModule と ngModel は意図的にこのルールの対象外です。これらを制限するには@rdlabo/rules/no-template-driven-formsを使います。
// TypeScript: importing Reactive Forms APIs\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\n\nimport * as forms from '@angular/forms';\nconst control = new forms.FormControl('');\n<!-- Template: Reactive Forms bindings -->\n<form [formGroup]=\"userForm\">\n <input formControlName=\"name\" />\n</form>\nimport { signal } from '@angular/core';\nimport { form, required } from '@angular/forms/signals';\n\nconst userModel = signal({ name: '' });\nconst userForm = form(userModel, (path) => {\n required(path.name);\n});\n<!-- Template: Signal Forms field binding -->\n<input [formField]=\"userForm.name\" />\nこのルールにオプションはありません。
\nSignal Formsを採用済み、またはReactive Formsから移行中のAngularプロジェクトで、このルールを有効にします。両方のform styleを対象にするため、@rdlabo/rules/no-template-driven-forms と同時に安全に有効化できます。
\n\nAngular Reactive Formsを禁止し、Signal Formsを推奨する。
\n
このルールは、Angular Reactive Formsから @angular/forms/signals への移行を支援します。Reactive Formsでは、Componentとservice間で共有されることの多い書き込み可能な FormControl / FormGroup 状態が必要なため、状態変更の発生元を追いにくくなります。Signal Formsではform状態をSignalsに保持するため、依存graphが明示的になり、デフォルトでreactiveになります。
プロジェクトがSignal Formsを採用する間に、新しいReactive Forms codeが追加されるのを防ぎたい場合に使います。
\nこのルールは3つのpatternを報告します。
\n@angular/forms からのReactive Forms APIのnamed import
\n次の名前のimportをすべて報告します。
AbstractControl, FormArray, FormArrayName, FormBuilder, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormGroupName, FormRecord, NonNullableFormBuilder, ReactiveFormsModule, UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators.
@angular/forms からのnamespace importまたはdefault import
\nnamed APIの検査を迂回できるため、import * as forms from '@angular/forms' と import forms from '@angular/forms' を報告します。
Reactive Formsのtemplate binding
\nAngular templateで次のbindingを報告します。
\nformControl, formControlName, formGroup, formGroupName, formArrayName.
FormsModule と ngModel は意図的にこのルールの対象外です。これらを制限するには@rdlabo/rules/no-template-driven-formsを使います。
// TypeScript: importing Reactive Forms APIs\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\n\nimport * as forms from '@angular/forms';\nconst control = new forms.FormControl('');\n<!-- Template: Reactive Forms bindings -->\n<form [formGroup]=\"userForm\">\n <input formControlName=\"name\" />\n</form>\nimport { signal } from '@angular/core';\nimport { form, required } from '@angular/forms/signals';\n\nconst userModel = signal({ name: '' });\nconst userForm = form(userModel, (path) => {\n required(path.name);\n});\n<!-- Template: Signal Forms field binding -->\n<input [formField]=\"userForm.name\" />\nこのルールにオプションはありません。
\nSignal Formsを採用済み、またはReactive Formsから移行中のAngularプロジェクトで、このルールを有効にします。両方のform styleを対象にするため、@rdlabo/rules/no-template-driven-forms と同時に安全に有効化できます。
\n\n明示的に許可された要素の
\nngModelバインディングを除き、template-driven formsを禁止する。
このルールはAngularテンプレート内のtemplate-driven formsを制限します。ngForm と ngModelGroup はテンプレート内に可変フォーム状態を保持するため、常に拒否されます。ngModel も、Signal Formsに適さないIonic Viewバインディング向けに明示的に許可された要素でない限り拒否されます。
許可要素は相互運用のための例外であり、template-driven formsの利用を推奨するものではありません。送信フォームでは、許可要素を含む場合でもSignal Formsを使用してください。
\nこのルールはAngularテンプレートに対して次の3パターンを検査します。
\nallowedElements に含まれない要素上の ngModel
\n許可リストにないタグの ngModel、[(ngModel)]、[ngModel] を報告します。単独の (ngModelChange) outputは検査しません。
ngModelGroup 属性
\nすべての要素上の ngModelGroup 属性を報告します。
ngForm referenceまたはdirective
\n<form #form=\"ngForm\"> と <div ngForm> を報告します。
型情報は使用せず、parse済みのtemplate ASTだけを検査します。
\n<!-- ngModel on an ordinary input -->\n<input [(ngModel)]=\"name\" />\n\n<!-- ngForm reference -->\n<form #form=\"ngForm\"></form>\n\n<!-- ngModelGroup directive -->\n<div ngModelGroup=\"address\"></div>\n<!-- Signal Forms field binding -->\n<input [formField]=\"userForm.name\" />\n\n<!-- ngModel allowed on ion-searchbar for a View binding -->\n<ion-searchbar [(ngModel)]=\"query\"></ion-searchbar>\n{\n \"rules\": {\n \"@rdlabo/rules/no-template-driven-forms\": [\n \"error\",\n {\n \"allowedElements\": [\"ion-searchbar\", \"ion-segment\", \"ion-radio-group\", \"ion-select\", \"ion-range\", \"ion-toggle\", \"ion-checkbox\", \"ion-input-otp\"]\n }\n ]\n }\n}\nallowedElementsstring[][]ngModel の使用を許可する要素のタグ名です。ion-searchbar や ion-toggle のように、View上の便宜として ngModel で値を公開するIonicコンポーネントを想定しています。要素が許可されていても、ngModelGroup と ngForm は報告されます。
Angular Signal Formsへ移行しながら、特定のIonic Viewコンポーネントに限定して ngModel バインディングが必要なプロジェクトで有効にしてください。Reactive Formsを全面的に採用し、Signal Formsを導入する予定がない場合にのみ無効にします。
\n\n明示的に許可された要素の
\nngModelバインディングを除き、template-driven formsを禁止する。
このルールはAngularテンプレート内のtemplate-driven formsを制限します。ngForm と ngModelGroup はテンプレート内に可変フォーム状態を保持するため、常に拒否されます。ngModel も、Signal Formsに適さないIonic Viewバインディング向けに明示的に許可された要素でない限り拒否されます。
許可要素は相互運用のための例外であり、template-driven formsの利用を推奨するものではありません。送信フォームでは、許可要素を含む場合でもSignal Formsを使用してください。
\nこのルールはAngularテンプレートに対して次の3パターンを検査します。
\nallowedElements に含まれない要素上の ngModel
\n許可リストにないタグの ngModel、[(ngModel)]、[ngModel] を報告します。単独の (ngModelChange) outputは検査しません。
ngModelGroup 属性
\nすべての要素上の ngModelGroup 属性を報告します。
ngForm referenceまたはdirective
\n<form #form=\"ngForm\"> と <div ngForm> を報告します。
型情報は使用せず、parse済みのtemplate ASTだけを検査します。
\n<!-- ngModel on an ordinary input -->\n<input [(ngModel)]=\"name\" />\n\n<!-- ngForm reference -->\n<form #form=\"ngForm\"></form>\n\n<!-- ngModelGroup directive -->\n<div ngModelGroup=\"address\"></div>\n<!-- Signal Forms field binding -->\n<input [formField]=\"userForm.name\" />\n\n<!-- ngModel allowed on ion-searchbar for a View binding -->\n<ion-searchbar [(ngModel)]=\"query\"></ion-searchbar>\n{\n \"rules\": {\n \"@rdlabo/rules/no-template-driven-forms\": [\n \"error\",\n {\n \"allowedElements\": [\"ion-searchbar\", \"ion-segment\", \"ion-radio-group\", \"ion-select\", \"ion-range\", \"ion-toggle\", \"ion-checkbox\", \"ion-input-otp\"]\n }\n ]\n }\n}\nallowedElementsstring[][]ngModel の使用を許可する要素のタグ名です。ion-searchbar や ion-toggle のように、View上の便宜として ngModel で値を公開するIonicコンポーネントを想定しています。要素が許可されていても、ngModelGroup と ngForm は報告されます。
Angular Signal Formsへ移行しながら、特定のIonic Viewコンポーネントに限定して ngModel バインディングが必要なプロジェクトで有効にしてください。Reactive Formsを全面的に採用し、Signal Formsを導入する予定がない場合にのみ無効にします。
\n\n非同期処理中の二重タップを防ぐため、設定した要素とイベントのバインディングにwrapper method（デフォルト: disableHandler($event, work)）を要求する
\n\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。
非同期処理を開始するbuttonをユーザーがtapしたら、処理がsettleするまでcontrolを無効にする必要があります。そうしなければ、2回目のtapで同じactionが再実行される可能性があります。このルールは、設定した (event) bindingにwrapper呼び出し構文を強制します。UIの無効化とwork値の適切な処理はwrapper実装の責務です。
Angularテンプレートを検査します。設定対象に一致する各 BoundEvent のhandler expressionは、2つ以上の引数を持つwrapper method呼び出しでなければなりません。
$event）。たとえば (click)=\"vm.disableHandler($event, vm.save())\" は有効です。(click)=\"vm.save()\" は報告されます。第2引数の型やPromiseを返すかどうかは検査しません。
$event.stopPropagation() や $event.preventDefault() のようなevent methodの単独呼び出しも許可します（allowEventMethods で設定可能）。
デフォルトの対象は次のとおりです。
\n<ion-button> と <button> の clicksubmit.spec.html ファイルは無視します。
{\n \"rules\": {\n \"@rdlabo/rules/prefer-disable-handler\": [\n \"error\",\n {\n \"method\": \"disableHandler\",\n \"eventParam\": \"$event\",\n \"targets\": [{ \"events\": [\"click\"], \"elements\": [\"ion-button\", \"button\"] }, { \"events\": [\"submit\"] }],\n \"allowEventMethods\": [\"stopPropagation\", \"preventDefault\"]\n }\n ]\n }\n}\nmethodstring\"disableHandler\"handler expressionに要求するwrapper method名です。
\neventParamstring\"$event\"wrapper methodの第1引数として渡す必要がある値です。
\ntargetsTarget[][{ events: ['click'], elements: ['ion-button', 'button'] }, { events: ['submit'] }]各targetはwrapperを要求するeventと要素を指定します。elements は任意で、省略するとそのeventを持つすべての要素に適用されます。
allowEventMethodsstring[][\"stopPropagation\", \"preventDefault\"]wrapperなしで許可するevent methodです。たとえば (click)=\"$event.stopPropagation()\" は有効です。
<ion-button (click)=\"vm.save()\">Save</ion-button>\n<form (submit)=\"vm.save()\"></form>\n<ion-button (click)=\"vm.disableHandler(vm.save())\">missing $event</ion-button>\n<ion-button (click)=\"vm.disableHandler($event, vm.save())\">Save</ion-button>\n<form (submit)=\"vm.disableHandler($event, vm.save())\">\n <ion-button type=\"submit\">Save</ion-button>\n</form>\n<ion-button (click)=\"$event.stopPropagation()\"></ion-button>\n<ion-input (ionComplete)=\"vm.disableHandler($event, vm.join())\"></ion-input>\n{\n \"rules\": {\n \"@rdlabo/rules/prefer-disable-handler\": [\n \"error\",\n {\n \"targets\": [{ \"events\": [\"ionComplete\"], \"elements\": [\"ion-input\"] }]\n }\n ]\n }\n}\nAPI呼び出し、navigation、modal表示などの非同期処理をユーザー操作から開始するIonic/Angularプロジェクトで有効にしてください。@rdlabo/rules/prefer-modal-launcher および @rdlabo/rules/deny-element と組み合わせることで、overlay logicを一元化できます。
\n\n非同期処理中の二重タップを防ぐため、設定した要素とイベントのバインディングにwrapper method（デフォルト: disableHandler($event, work)）を要求する
\n\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。
非同期処理を開始するbuttonをユーザーがtapしたら、処理がsettleするまでcontrolを無効にする必要があります。そうしなければ、2回目のtapで同じactionが再実行される可能性があります。このルールは、設定した (event) bindingにwrapper呼び出し構文を強制します。UIの無効化とwork値の適切な処理はwrapper実装の責務です。
Angularテンプレートを検査します。設定対象に一致する各 BoundEvent のhandler expressionは、2つ以上の引数を持つwrapper method呼び出しでなければなりません。
$event）。たとえば (click)=\"vm.disableHandler($event, vm.save())\" は有効です。(click)=\"vm.save()\" は報告されます。第2引数の型やPromiseを返すかどうかは検査しません。
$event.stopPropagation() や $event.preventDefault() のようなevent methodの単独呼び出しも許可します（allowEventMethods で設定可能）。
デフォルトの対象は次のとおりです。
\n<ion-button> と <button> の clicksubmit.spec.html ファイルは無視します。
{\n \"rules\": {\n \"@rdlabo/rules/prefer-disable-handler\": [\n \"error\",\n {\n \"method\": \"disableHandler\",\n \"eventParam\": \"$event\",\n \"targets\": [{ \"events\": [\"click\"], \"elements\": [\"ion-button\", \"button\"] }, { \"events\": [\"submit\"] }],\n \"allowEventMethods\": [\"stopPropagation\", \"preventDefault\"]\n }\n ]\n }\n}\nmethodstring\"disableHandler\"handler expressionに要求するwrapper method名です。
\neventParamstring\"$event\"wrapper methodの第1引数として渡す必要がある値です。
\ntargetsTarget[][{ events: ['click'], elements: ['ion-button', 'button'] }, { events: ['submit'] }]各targetはwrapperを要求するeventと要素を指定します。elements は任意で、省略するとそのeventを持つすべての要素に適用されます。
allowEventMethodsstring[][\"stopPropagation\", \"preventDefault\"]wrapperなしで許可するevent methodです。たとえば (click)=\"$event.stopPropagation()\" は有効です。
<ion-button (click)=\"vm.save()\">Save</ion-button>\n<form (submit)=\"vm.save()\"></form>\n<ion-button (click)=\"vm.disableHandler(vm.save())\">missing $event</ion-button>\n<ion-button (click)=\"vm.disableHandler($event, vm.save())\">Save</ion-button>\n<form (submit)=\"vm.disableHandler($event, vm.save())\">\n <ion-button type=\"submit\">Save</ion-button>\n</form>\n<ion-button (click)=\"$event.stopPropagation()\"></ion-button>\n<ion-input (ionComplete)=\"vm.disableHandler($event, vm.join())\"></ion-input>\n{\n \"rules\": {\n \"@rdlabo/rules/prefer-disable-handler\": [\n \"error\",\n {\n \"targets\": [{ \"events\": [\"ionComplete\"], \"elements\": [\"ion-input\"] }]\n }\n ]\n }\n}\nAPI呼び出し、navigation、modal表示などの非同期処理をユーザー操作から開始するIonic/Angularプロジェクトで有効にしてください。@rdlabo/rules/prefer-modal-launcher および @rdlabo/rules/deny-element と組み合わせることで、overlay logicを一元化できます。
\n\n\n
presentModal呼び出しをlaunch*launcher関数内に置くことを要求する。\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。
modalとsheetは、対象pageからexportされた専用launcher関数を介して表示してください。これにより、呼び出し側をmodal構築の詳細から分離し、application全体でmodal APIを統一できます。このルールは、presentModal（または設定した他のpresent method）がlauncher patternに一致する名前の関数内でのみ呼び出されることを保証します。
presentModal、helper.presentModal(...)、overlay.presentSheet(...) などの呼び出しについて CallExpression nodeを検査します。launcher関数内にない呼び出しは報告されます。
launcher関数とは、設定した正規表現（デフォルトは ^launch）に名前が一致する関数です。次の形式を検査します。
function launchXxx(...)const launchXxx = (...)class Foo { launchXxx = (...) }class Foo { launchXxx() {} }launchExamplePage 内の run arrowは許可されます。{\n \"rules\": {\n \"@rdlabo/rules/prefer-modal-launcher\": [\n \"error\",\n {\n \"presentMethodNames\": [\"presentModal\"],\n \"launcherNamePattern\": \"^launch\"\n }\n ]\n }\n}\npresentMethodNamesstring[][\"presentModal\"]制限対象とするpresent method名です。
\nlauncherNamePatternstring\"^launch\"正規表現を表す文字列です。present method呼び出しは、このpatternに名前が一致する関数内になければなりません。
\nexport class ExamplePage {\n readonly helper = inject(HelperService);\n\n async open() {\n await this.helper.presentModal(OtherPage, {}); // not in a launcher\n }\n}\nexport class ExamplePage {\n readonly launchOtherPage = this.helper.presentModal(OtherPage, {}); // not a function\n}\nexport async function openModal(overlay: Helper) {\n await overlay.presentModal(ExamplePage, {}); // name does not match ^launch\n}\nexport const launchExamplePage = (overlay: Helper, props: Props) => {\n return overlay.presentModal(ExamplePage, props);\n};\nexport function launchExamplePage(overlay: Helper, props: Props) {\n return overlay.presentModal(ExamplePage, props);\n}\nexport const launchExamplePage = (overlay: Helper, props: Props) => {\n const run = () => overlay.presentModal(ExamplePage, props);\n return run();\n};\nexport const openSheet = (overlay: Helper) => {\n return overlay.presentSheet(SheetPage, {});\n};\n{\n \"rules\": {\n \"@rdlabo/rules/prefer-modal-launcher\": [\n \"error\",\n {\n \"presentMethodNames\": [\"presentSheet\"],\n \"launcherNamePattern\": \"^(launch|open)\"\n }\n ]\n }\n}\nmodal、sheet、その他のoverlayにlauncher patternを採用するIonic/Angularプロジェクトで有効にしてください。@rdlabo/rules/deny-element および @rdlabo/rules/prefer-disable-handler と組み合わせて使用します。
\n\n\n
presentModal呼び出しをlaunch*launcher関数内に置くことを要求する。\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。
modalとsheetは、対象pageからexportされた専用launcher関数を介して表示してください。これにより、呼び出し側をmodal構築の詳細から分離し、application全体でmodal APIを統一できます。このルールは、presentModal（または設定した他のpresent method）がlauncher patternに一致する名前の関数内でのみ呼び出されることを保証します。
presentModal、helper.presentModal(...)、overlay.presentSheet(...) などの呼び出しについて CallExpression nodeを検査します。launcher関数内にない呼び出しは報告されます。
launcher関数とは、設定した正規表現（デフォルトは ^launch）に名前が一致する関数です。次の形式を検査します。
function launchXxx(...)const launchXxx = (...)class Foo { launchXxx = (...) }class Foo { launchXxx() {} }launchExamplePage 内の run arrowは許可されます。{\n \"rules\": {\n \"@rdlabo/rules/prefer-modal-launcher\": [\n \"error\",\n {\n \"presentMethodNames\": [\"presentModal\"],\n \"launcherNamePattern\": \"^launch\"\n }\n ]\n }\n}\npresentMethodNamesstring[][\"presentModal\"]制限対象とするpresent method名です。
\nlauncherNamePatternstring\"^launch\"正規表現を表す文字列です。present method呼び出しは、このpatternに名前が一致する関数内になければなりません。
\nexport class ExamplePage {\n readonly helper = inject(HelperService);\n\n async open() {\n await this.helper.presentModal(OtherPage, {}); // not in a launcher\n }\n}\nexport class ExamplePage {\n readonly launchOtherPage = this.helper.presentModal(OtherPage, {}); // not a function\n}\nexport async function openModal(overlay: Helper) {\n await overlay.presentModal(ExamplePage, {}); // name does not match ^launch\n}\nexport const launchExamplePage = (overlay: Helper, props: Props) => {\n return overlay.presentModal(ExamplePage, props);\n};\nexport function launchExamplePage(overlay: Helper, props: Props) {\n return overlay.presentModal(ExamplePage, props);\n}\nexport const launchExamplePage = (overlay: Helper, props: Props) => {\n const run = () => overlay.presentModal(ExamplePage, props);\n return run();\n};\nexport const openSheet = (overlay: Helper) => {\n return overlay.presentSheet(SheetPage, {});\n};\n{\n \"rules\": {\n \"@rdlabo/rules/prefer-modal-launcher\": [\n \"error\",\n {\n \"presentMethodNames\": [\"presentSheet\"],\n \"launcherNamePattern\": \"^(launch|open)\"\n }\n ]\n }\n}\nmodal、sheet、その他のoverlayにlauncher patternを採用するIonic/Angularプロジェクトで有効にしてください。@rdlabo/rules/deny-element および @rdlabo/rules/prefer-disable-handler と組み合わせて使用します。
\n\nComponentの
\nnew ViewModel(this)、ViewModelStore<ComponentType, Keys>継承を強制し、View APIをViewModelから排除する。\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。
ViewModel architecture patternを強制します。Angular Componentは new ViewModel(this) で初期化したViewModelを所有しなければなりません。少なくとも1つの一致するpropertyを要求しますが、追加のViewModel instanceは拒否しません。ViewModelは ViewModelStore<ComponentType> を継承し、host を再宣言したり、viewChild、effect、computed、afterNextRender などのView固有APIを含めたりしないでください。
次の3つを検査します。
\n@Component classには new ViewModel(this) で初期化したpropertyが必要です。constructor呼び出しの第1引数は this でなければなりません。
ViewModelStore<ComponentType> を継承するViewModel（または設定した viewModelClassName）というclassは、ViewModelStore<...>、名前が ViewModel で終わるbase、または ModelSearch を継承しなければなりません。最初のgeneric引数はhost Component型でなければなりません。中間classのgeneric defaultも解決します。
ViewModelStore<ExamplePage, 'model' | 'form'> を使う場合、第2引数以降の型引数が許可されます。ViewModelStore を直接継承するときに型引数が2つを超えると報告されます。ViewModel classでは次のAPIを呼び出せません。
\nviewChild, viewChildren, contentChild, contentChildren, effect, computed, afterNextRender, afterEveryRender, afterRenderEffect.
この一覧は bannedApis optionで変更できます。viewChild() のような直接呼び出しと、viewChild.required() のような .required() variantを認識します。namespace prefix付き呼び出しは解決しません。
@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly title = 'x'; // no ViewModel\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(); // missing `this`\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends StoreModel {} // wrong base class\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends ViewModelStore<ExamplePage> {\n readonly el = viewChild('host'); // View API in ViewModel\n}\nimport { Component, computed, effect, viewChild } from '@angular/core';\n\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n readonly title = computed(() => this.vm.label());\n readonly el = viewChild('host');\n\n constructor() {\n effect(() => this.vm.label());\n }\n}\n\nclass ViewModel extends ViewModelStore<ExamplePage> {\n readonly label = signal('hello');\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends ViewModelStore<ExamplePage, 'inventoryModel'> {\n readonly inventoryModel = signal<Inventory | null>(null);\n}\n@Component({ selector: 'app-example', template: '' })\nexport class FoodsPage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends MainViewModel<FoodsPage> {}\n{\n \"rules\": {\n \"@rdlabo/rules/require-viewmodel\": [\n \"error\",\n {\n \"viewModelClassName\": \"ViewModel\",\n \"viewModelStoreClassName\": \"ViewModelStore\",\n \"bannedApis\": [\n \"viewChild\",\n \"viewChildren\",\n \"contentChild\",\n \"contentChildren\",\n \"effect\",\n \"computed\",\n \"afterNextRender\",\n \"afterEveryRender\",\n \"afterRenderEffect\"\n ]\n }\n ]\n }\n}\nviewModelClassNamestring\"ViewModel\"Component内で検索するclass名です。PageState など別の命名規則を使うプロジェクトで指定します。
viewModelStoreClassNamestring\"ViewModelStore\"ViewModelが継承すべきbase class名、または名前が ViewModel で終わる中間base class名です。
bannedApisstring[]ViewModel内で許可しないAPIです。直接呼び出しと .required(...) の使用を検出します。namespace prefix付き呼び出しは解決しません。
@rdlabo/ionic-angular-kit または同様のarchitectureでViewModel patternを採用するプロジェクトで有効にしてください。@rdlabo/rules/no-component-writable-signal と組み合わせると、Component stateをread-only、ViewModel stateをwritableに保てます。
\n\nComponentの
\nnew ViewModel(this)、ViewModelStore<ComponentType, Keys>継承を強制し、View APIをViewModelから排除する。\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。
ViewModel architecture patternを強制します。Angular Componentは new ViewModel(this) で初期化したViewModelを所有しなければなりません。少なくとも1つの一致するpropertyを要求しますが、追加のViewModel instanceは拒否しません。ViewModelは ViewModelStore<ComponentType> を継承し、host を再宣言したり、viewChild、effect、computed、afterNextRender などのView固有APIを含めたりしないでください。
次の3つを検査します。
\n@Component classには new ViewModel(this) で初期化したpropertyが必要です。constructor呼び出しの第1引数は this でなければなりません。
ViewModelStore<ComponentType> を継承するViewModel（または設定した viewModelClassName）というclassは、ViewModelStore<...>、名前が ViewModel で終わるbase、または ModelSearch を継承しなければなりません。最初のgeneric引数はhost Component型でなければなりません。中間classのgeneric defaultも解決します。
ViewModelStore<ExamplePage, 'model' | 'form'> を使う場合、第2引数以降の型引数が許可されます。ViewModelStore を直接継承するときに型引数が2つを超えると報告されます。ViewModel classでは次のAPIを呼び出せません。
\nviewChild, viewChildren, contentChild, contentChildren, effect, computed, afterNextRender, afterEveryRender, afterRenderEffect.
この一覧は bannedApis optionで変更できます。viewChild() のような直接呼び出しと、viewChild.required() のような .required() variantを認識します。namespace prefix付き呼び出しは解決しません。
@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly title = 'x'; // no ViewModel\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(); // missing `this`\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends StoreModel {} // wrong base class\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends ViewModelStore<ExamplePage> {\n readonly el = viewChild('host'); // View API in ViewModel\n}\nimport { Component, computed, effect, viewChild } from '@angular/core';\n\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n readonly title = computed(() => this.vm.label());\n readonly el = viewChild('host');\n\n constructor() {\n effect(() => this.vm.label());\n }\n}\n\nclass ViewModel extends ViewModelStore<ExamplePage> {\n readonly label = signal('hello');\n}\n@Component({ selector: 'app-example', template: '' })\nexport class ExamplePage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends ViewModelStore<ExamplePage, 'inventoryModel'> {\n readonly inventoryModel = signal<Inventory | null>(null);\n}\n@Component({ selector: 'app-example', template: '' })\nexport class FoodsPage {\n readonly vm = new ViewModel(this);\n}\n\nclass ViewModel extends MainViewModel<FoodsPage> {}\n{\n \"rules\": {\n \"@rdlabo/rules/require-viewmodel\": [\n \"error\",\n {\n \"viewModelClassName\": \"ViewModel\",\n \"viewModelStoreClassName\": \"ViewModelStore\",\n \"bannedApis\": [\n \"viewChild\",\n \"viewChildren\",\n \"contentChild\",\n \"contentChildren\",\n \"effect\",\n \"computed\",\n \"afterNextRender\",\n \"afterEveryRender\",\n \"afterRenderEffect\"\n ]\n }\n ]\n }\n}\nviewModelClassNamestring\"ViewModel\"Component内で検索するclass名です。PageState など別の命名規則を使うプロジェクトで指定します。
viewModelStoreClassNamestring\"ViewModelStore\"ViewModelが継承すべきbase class名、または名前が ViewModel で終わる中間base class名です。
bannedApisstring[]ViewModel内で許可しないAPIです。直接呼び出しと .required(...) の使用を検出します。namespace prefix付き呼び出しは解決しません。
@rdlabo/ionic-angular-kit または同様のarchitectureでViewModel patternを採用するプロジェクトで有効にしてください。@rdlabo/rules/no-component-writable-signal と組み合わせると、Component stateをread-only、ViewModel stateをwritableに保てます。
\n\nテンプレートでAngular Signalにアクセスするとき
\n()を要求する\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。
Angular Signalは関数です。テンプレートで現在値を読み取るには、Signalを () 付きで呼び出す必要があります。RxJSの BehaviorSubject や model() inputから移行するとき、括弧の付け忘れはよくあるミスです。このルールはAngularテンプレート内のSignal識別子を検出し、{{ count }} や [hidden]=\"count\" のような裸の読み取りを報告します。
各 @Component のAngularテンプレートを解析し、次からSignal識別子を収集します。
signal、model、computed、linkedSignal、input、toSignal のいずれかである呼び出しによって初期化されたclass property。count = { first: signal(0) }）。検出は名前に基づき、import元は解決しません。alias付きfactory importは認識されず、逆に同名の無関係なローカル関数がSignal factoryとして扱われる場合があります。toSignal は通常 @angular/core/rxjs-interop からimportされますが、このルールはmoduleではなく名前で認識します。
続いて、テンプレート内でSignalが () なしで読み取られる箇所を報告します。対象には次が含まれます。
{{ count }}[hidden]=\"count\"(click)=\"count > 0 ? ...\"@if (count)、@switch (count)、@for (...; track count)count?.signalcount | asynctemplate と templateUrl の両方のcomponentに対応します。
<div>{{ count }}</div>\n<child [hidden]=\"count > 0\"></child>\n@if (count) {\n<div>Positive</div>\n}\n<ion-input [formField]=\"count.first\"></ion-input>\n<div>{{ count() }}</div>\n<child [hidden]=\"count() > 0\"></child>\n@if (count()) {\n<div>Positive</div>\n}\n<ion-input [formField]=\"count.first()\"></ion-input>\n子componentが値ではなくSignal objectを期待する場合は、() なしで参照を渡せます。
<child [inventorySignal]=\"inventorySignal\"></child>\nこの場合を認識し、bound attributeとして渡された裸のSignalは報告しません。
\nこのルールにオプションはありません。
\nSignalを使用するすべてのAngularプロジェクトで有効にしてください。Observable ベースのコードから移行するときや、テンプレート内で呼び出す必要のあるSignal風objectを返す model() と input() を導入するときに特に有効です。
\n\nテンプレートでAngular Signalにアクセスするとき
\n()を要求する\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。
Angular Signalは関数です。テンプレートで現在値を読み取るには、Signalを () 付きで呼び出す必要があります。RxJSの BehaviorSubject や model() inputから移行するとき、括弧の付け忘れはよくあるミスです。このルールはAngularテンプレート内のSignal識別子を検出し、{{ count }} や [hidden]=\"count\" のような裸の読み取りを報告します。
各 @Component のAngularテンプレートを解析し、次からSignal識別子を収集します。
signal、model、computed、linkedSignal、input、toSignal のいずれかである呼び出しによって初期化されたclass property。count = { first: signal(0) }）。検出は名前に基づき、import元は解決しません。alias付きfactory importは認識されず、逆に同名の無関係なローカル関数がSignal factoryとして扱われる場合があります。toSignal は通常 @angular/core/rxjs-interop からimportされますが、このルールはmoduleではなく名前で認識します。
続いて、テンプレート内でSignalが () なしで読み取られる箇所を報告します。対象には次が含まれます。
{{ count }}[hidden]=\"count\"(click)=\"count > 0 ? ...\"@if (count)、@switch (count)、@for (...; track count)count?.signalcount | asynctemplate と templateUrl の両方のcomponentに対応します。
<div>{{ count }}</div>\n<child [hidden]=\"count > 0\"></child>\n@if (count) {\n<div>Positive</div>\n}\n<ion-input [formField]=\"count.first\"></ion-input>\n<div>{{ count() }}</div>\n<child [hidden]=\"count() > 0\"></child>\n@if (count()) {\n<div>Positive</div>\n}\n<ion-input [formField]=\"count.first()\"></ion-input>\n子componentが値ではなくSignal objectを期待する場合は、() なしで参照を渡せます。
<child [inventorySignal]=\"inventorySignal\"></child>\nこの場合を認識し、bound attributeとして渡された裸のSignalは報告しません。
\nこのルールにオプションはありません。
\nSignalを使用するすべてのAngularプロジェクトで有効にしてください。Observable ベースのコードから移行するときや、テンプレート内で呼び出す必要のあるSignal風objectを返す model() と input() を導入するときに特に有効です。
\n\nSignalがSignalとして正しく使われているか検査する。
\n\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。- ✒️ コマンドラインの
\n--fixオプションで、このルールが報告する問題の一部を自動修正できます。
Angular Signalはgetter関数です。読み取りには () が必要で、書き込みには .set() または .update() を使う必要があります。このルールは、Signal変数を通常の値のように扱うコードを検出し、一般的な誤りの多くを自動修正できます。
Signal factory（signal、model、input、linkedSignal、toSignal、asReadonly）で初期化されたclass propertyを追跡し、次のような誤用を報告します。
this.count() ではなく this.countthis.count.set(value) ではなく this.count() = valuethis.user.update(user => ({ ...user, name: 'Jane' })) ではなく this.user().name = 'Jane'this.items.update(items => { items.push(x); return items; }) ではなく this.items().push(x)this.#user.set(value) ではなく、Signal propertyへの直接代入 this.#user = valueSignal参照が期待されるcontextと、値が期待されるcontextを区別します。たとえば、Signal objectをpropsとして渡すことは許可されます。
\nconst props = { food: this.food };\nlaunchModal({ food: this.food });\nexport class SigninPage {\n readonly #id = signal<number | undefined>(undefined);\n\n constructor() {\n this.#id = 1;\n }\n\n useMethod() {\n if (this.#id) {\n this.#id().hoge = 1;\n }\n }\n}\nexport class SigninPage {\n readonly #user = signal<{ name: string }>({ name: 'John' });\n\n updateUser() {\n this.#user().name = 'Jane';\n }\n}\nexport class SigninPage {\n readonly #numbers = signal<number[]>([1, 2, 3]);\n\n updateNumbers() {\n this.#numbers().push(4);\n }\n}\nexport class SigninPage {\n readonly #value = signal<number>(0);\n\n updateValue() {\n this.#value() = 42;\n }\n}\nexport class SigninPage {\n readonly #user = signal<{ name: string }>({ name: 'John' });\n\n updateUser() {\n this.#user.update((user) => ({ ...user, name: 'Jane' }));\n }\n}\nexport class SigninPage {\n readonly #numbers = signal<number[]>([1, 2, 3]);\n\n updateNumbers() {\n this.#numbers.update((numbers) => {\n numbers.push(4);\n return numbers;\n });\n }\n}\nexport class SigninPage {\n readonly #value = signal<number>(0);\n\n updateValue() {\n this.#value.set(42);\n }\n}\nexport class SigninPage {\n readonly food = signal<number>(0);\n\n openPreview() {\n const props = { food: this.food };\n launchModal({ food: this.food });\n }\n}\n次のパターンを自動修正できます。
\nthis.count = value -> this.count.set(value)this.count() = value -> this.count.set(value)this.count().x = value -> this.count.update(value => ({ ...value, x: value }))this.count().push(x) -> this.count.update(value => { value.push(x); return value; })このルールにオプションはありません。
\nSignalを使用するすべてのAngularプロジェクトで有効にしてください。テンプレート内のSignal使用を検査する @rdlabo/rules/signal-use-as-signal-template と相互補完します。
\n\nSignalがSignalとして正しく使われているか検査する。
\n\n
\n- ⭐️ このルールは
\nplugin:@rdlabo/rules/recommendedプリセットに含まれます。- ✒️ コマンドラインの
\n--fixオプションで、このルールが報告する問題の一部を自動修正できます。
Angular Signalはgetter関数です。読み取りには () が必要で、書き込みには .set() または .update() を使う必要があります。このルールは、Signal変数を通常の値のように扱うコードを検出し、一般的な誤りの多くを自動修正できます。
Signal factory（signal、model、input、linkedSignal、toSignal、asReadonly）で初期化されたclass propertyを追跡し、次のような誤用を報告します。
this.count() ではなく this.countthis.count.set(value) ではなく this.count() = valuethis.user.update(user => ({ ...user, name: 'Jane' })) ではなく this.user().name = 'Jane'this.items.update(items => { items.push(x); return items; }) ではなく this.items().push(x)this.#user.set(value) ではなく、Signal propertyへの直接代入 this.#user = valueSignal参照が期待されるcontextと、値が期待されるcontextを区別します。たとえば、Signal objectをpropsとして渡すことは許可されます。
\nconst props = { food: this.food };\nlaunchModal({ food: this.food });\nexport class SigninPage {\n readonly #id = signal<number | undefined>(undefined);\n\n constructor() {\n this.#id = 1;\n }\n\n useMethod() {\n if (this.#id) {\n this.#id().hoge = 1;\n }\n }\n}\nexport class SigninPage {\n readonly #user = signal<{ name: string }>({ name: 'John' });\n\n updateUser() {\n this.#user().name = 'Jane';\n }\n}\nexport class SigninPage {\n readonly #numbers = signal<number[]>([1, 2, 3]);\n\n updateNumbers() {\n this.#numbers().push(4);\n }\n}\nexport class SigninPage {\n readonly #value = signal<number>(0);\n\n updateValue() {\n this.#value() = 42;\n }\n}\nexport class SigninPage {\n readonly #user = signal<{ name: string }>({ name: 'John' });\n\n updateUser() {\n this.#user.update((user) => ({ ...user, name: 'Jane' }));\n }\n}\nexport class SigninPage {\n readonly #numbers = signal<number[]>([1, 2, 3]);\n\n updateNumbers() {\n this.#numbers.update((numbers) => {\n numbers.push(4);\n return numbers;\n });\n }\n}\nexport class SigninPage {\n readonly #value = signal<number>(0);\n\n updateValue() {\n this.#value.set(42);\n }\n}\nexport class SigninPage {\n readonly food = signal<number>(0);\n\n openPreview() {\n const props = { food: this.food };\n launchModal({ food: this.food });\n }\n}\n次のパターンを自動修正できます。
\nthis.count = value -> this.count.set(value)this.count() = value -> this.count.set(value)this.count().x = value -> this.count.update(value => ({ ...value, x: value }))this.count().push(x) -> this.count.update(value => { value.push(x); return value; })このルールにオプションはありません。
\nSignalを使用するすべてのAngularプロジェクトで有効にしてください。テンプレート内のSignal使用を検査する @rdlabo/rules/signal-use-as-signal-template と相互補完します。