ngx-form-rules

Form Design

Easily enable and disable Angular reactive form fields using simple rules

Description

A lightweight Angular library that makes it easy to enable, disable, and control reactive form fields using simple, declarative rules. Built for Angular Reactive Forms with zero dependencies.

ngx-reactive-form-rules

Easily enable and disable Angular reactive form fields using simple rules.

ngx-reactive-form-rules helps you control form behavior (enable, disable, clear values) based on other field values—without writing repetitive subscription logic.

✔ Works with Angular Reactive Forms
✔ Lightweight and simple
✔ No external dependencies
✔ Perfect for dynamic forms

Installation

npm i ngx-form-rules

Uninstall

npm uninstall ngx-form-rules

💞 How to User 💞

Create a file checking-rules.config.ts or checking-rules.ts

import { FormRule } from 'ngx-form-rules';

export const RULES: FormRule[] = [
    { 
      trigger: 'valueA', 
      onValue: true, 
      disable: ['valueC'],
      enable: ['valueB'] 
    },
    { 
      trigger: 'valueA', 
      onValue: false, 
      disable: ['valueB'], 
      enable: [] 
    }    
];

In ts file app.component.ts

    import { NgxFormRulesService } from 'ngx-form-rules';
    import { RULES } from './checking-rules.config';

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
    })
    export class AppComponent implements OnInit{
    
    form: FormGroup;
    private readonly FORM_RULES = RULES;

    constructor(
        private fb: FormBuilder,
        private ruleEngine: NgxFormRulesService) {  
        }

    ngOnInit(): void {
        this.form = this.fb.group({     
        valueA: [''],
        valueB: [''],
        valueC: ['']
        });

        this.ruleEngine.applyRules(this.form, this.FORM_RULES); // Apply rules to the form    
        // this.onLoadData();
    }
    /*
    onLoadData(): void {
        this.partThreeService.getPartThreeByUuId(this.id).subscribe(
            (res) => {
            if (res && res.id) {
                this.form.patchValue(res);
                this.ruleEngine.syncRulesWithCurrentValues(this.form, this.FORM_RULES);
            }
            this.isDataLoaded = true;},
            (error) => { this.isDataLoaded = true; }
        );
    }
    */
    }

In html file app.component.html

<form
    [formGroup]="form"
    name="formGroup"
    novalidate style="margin-top: 20px; display: flex; justify-content: center; align-items: center; ">
    <div style="width: 50%;">
        <div class="font-bold mb-4">
            Availability, Quantity, Category of Land: Is the availability, the quantity, and the category of the land clearly stated?
        </div><br>        
        <app-radio-field [control]="form.get('valueA')"
            [label]="'a) Check the availability of information'"
            [option1]="{ label: 'Information is available', value: true }"
            [option2]="{ label: 'Information is not available (skip b and go to c)', value: false }">
        </app-radio-field>
        <br />     
        <app-radio-field [control]="form.get('valueB')"
            [label]="'b) Check the quality of information'"
            [option1]="{ label: 'Appropriate as indicated', value: true }"
            [option2]="{ label: 'Needs amendment', value: false }">
        </app-radio-field>
        <br />
        <app-textarea-field
            [label]="'c) Remarks and suggestions'"
            [control]="form.get('valueC')">
        </app-textarea-field>         
    </div>    
</form>