RRForms is a simple utility that adds reactive conditional disabling/enabling & addition/removal of validators to Angular 2+ Reactive Forms.

Related tags

Maps ngx-rrforms
Overview

ngx-rrforms

Reactive Reactive Forms for Angular 2+. Self-reactivity and more (soon).

CONTENT TABLE

INSTALLATION

Run this command:

npm i --save ngx-rrforms

OVERVIEW

This library aims to improve the reactivity of Angular's inbuilt reactive forms by providing a simple utility in the form of the RRForm class that greatly simplifies implementing conditional behaviour (eg. conditional rendering, validation) that depends on the form's own values. As of version 1.0.1 only self-reactivity has been implemented.

EXAMPLES

CONDITIONAL DISABLING

Below code shows the simplest way RRForm can be used, which is to disable and enable a control depending on another control's value.

import {Component, OnDestroy} from '@angular/core';
import {RRForm} from "ngx-rrforms";
import {FormBuilder, FormGroup} from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
  constructor(private fb: FormBuilder) {
    this.formGroup = this.fb.group({
      name: '',
      surname: {value: '', disabled: true},
    })

    this.rr = new RRForm(this.formGroup);
    this.rr.control('surname').disable().when((value) => value.name?.length < 5);
  }

  ngOnDestroy(): void {
    this.rr.destroy();
  }

  rr: RRForm;
  formGroup: FormGroup
}

The above code will disable the surname control if the length of the name control's value is less than 5. It will re-enable it if it's equal to or more than five.

This is how it works live:

CONDITIONAL VALIDATORS

The code below implements the simplest use of conditional addition and removal of validators from controls.

import {Component, OnDestroy, OnInit} from '@angular/core';
import {RRForm} from "ngx-rrforms";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
  constructor(private fb: FormBuilder) {
    this.formGroup = this.fb.group({
      name: '',
      surname: {value: '', disabled: true},
    })

    this.rr = new RRForm(this.formGroup);
    this.rr.control('surname').disable().when((value) => value.name?.length < 5);
    this.rr.control('surname').validate().when(
      {
        logic: [(value) => value.name?.length > 7],
        validators: [Validators.maxLength(6), Validators.required]
      },
    );
  }

  ngOnDestroy(): void {
    this.rr.destroy();
  }

  rr: RRForm;
  formGroup: FormGroup
}

In the above code, the surname control will be disabled on the same condition as in the previous example, but in addition to that, if the length of the name control's value is greater than§ 5, it will add the maxlength and required validators to the surname control.

This is how it looks live:

API

  • RRForm

    constructor RRForm(control: AbstractControl)

    The main class, the constructor takes in an AbstractControl object representing the form where conditional logic will be performed.\

    When changes are detected in the control passed into the constructor, logic from the disable() and validate() will be executed.

  • RRForm.control(path: Array<string | number> | string): RRFormControl

    param path: Array<string | number> | string - the path to the control as would be used in formGroup.get(path: Array<string | number> | string): AbstractControl

    Returns an interface to add conditional rules to the control passed in the constructor. The object returned contains two methods, disable() and validate().

  • RRForm.destroy(): void

    Unsubscribes from all the observables used by the RRForm object. Make sure to run it inside ngOnDestroy().

CONDITIONALS

  • RRFormControl.disable().when(...logicFunctions: RRConditionalLogic): RRFormConditionalInterface

param logicFunctions: ((value: any) => boolean)[]: an unpacked array of functions of boolean return type.
The value: any param is the value of the control passed into the constructor.

  • conditionally disablse the specified control if any of the functions passed in return true on form value change

  • re-enablse the control if any of the functions passed in return false on form value change

  • RRFormControl.validate().when(...logic: RRConditionalValidatorLogic): RRFormConditionalInterface:

param logic: {logic: ((value: any) => boolean)[], validators: ValidatorFn[]}[]: an unpacked array of objects, each containing an array of boolean return type functions in the logic attribute and an array of ValidatorFn (eg. Validators.required) to be added when any of the logic functions returns true on form value change and removed when any of them returns false on form value change.

  • conditionally adds validators when any of the functions passed in return true on form value change
  • removes those validators when any of the functions passed in return false on form value change
Owner
Mateusz Cieśla
Mateusz Cieśla
Simple loader to use google maps services into your react applications

react-google-maps-loader React Component to use google maps services into your react applications using a render prop. Getting started You can downloa

Cédric Delpoux 55 Oct 12, 2021
Angular like reactive forms in React.

React Reactive Forms It's a library inspired by the Angular's Reactive Forms, which allows to create a tree of form control objects in the component c

Kuldeep Saxena 275 Jan 18, 2022
Inventory App - a SPA (Single Page Application) project developed with Angular using Reactive Forms and VMware's Clarity components.

InventoryApp This project was generated with Angular CLI version 13.0.1. Development server Run ng serve for a dev server. Navigate to http://localhos

null 5 Jan 7, 2022
A simple project showing the usage of useState, useEffect and conditional rendering in React

Getting Started with Tour-sample React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can ru

Amaechi johnkingsley 1 Dec 25, 2021
Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance.

These are the docs for React on Rails 12. To see the version 11 docs, click here. News October 14, 2020: RUBY ROGUES RR 474: React on Rails V12 – Don’

ShakaCode 4.8k Jan 19, 2022
React native module that allows download assets in background from an url and persist them into a specific directory in Documents folder on iOS. In addition, you can delete and list assets from that directory.

react-native-assets React native module that allows download assets in background from an url and persist them into a specific directory in Documents

Juan Gabriel Gutierrez 32 Dec 15, 2018
Codeone is a web app built on top of React which includes an IDE supporting multiple languages for programming in addition with a highly customizable Web Editor supporting real time changes

Codeone is a web app built on top of React which includes an IDE supporting multiple languages for programming in addition with a highly customizable Web Editor supporting real time changes

Dhruv Pasricha 11 Jan 9, 2022
You can found the concept of react hooks, local storage, conditional rendering and react-router-dom.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Tikaram Acharya 1 Dec 23, 2021
Angular - Best Practices of Reactive Programming.

This project is a study system in Angular and implementing using the best practices of reactive programming.

Miguel Müller 3 Jan 2, 2022
This application contains end to end non blocking reactive flow. From Bankend( Database, Spring) and FrontEnd Angular

SpringReactiveApp This application has following projects Spring boot reactive with Mongo Database Angular with EventSource for reactive(non-blocking

null 1 Oct 26, 2021
Consuming series data from marvel api and implementing features like infinite scroll, reactive search and lazy loading on images with Angular.

Consuming series data from marvel api and implementing features like infinite scroll, reactive search and lazy loading on images with Angular.

Renato Curcino Barros 1 Dec 1, 2021
:eyes: A React component that adds pan and zoom features to SVG

react-svg-pan-zoom react-svg-pan-zoom is a React component that adds pan and zoom features to the SVG images. It helps to display big SVG images in a

Christian 610 Dec 24, 2021
:eyes: A React component that adds pan and zoom features to SVG

react-svg-pan-zoom react-svg-pan-zoom is a React component that adds pan and zoom features to the SVG images. It helps to display big SVG images in a

Christian 610 Dec 24, 2021
Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.

React Children Utilities Recursive and extended utils for React children opaque data structure. Installation Available as a package and can be added t

Fernando Pasik 220 Jan 11, 2022
React Native Higher Order Component that adds advanced caching functionality to the react native Image component.

React Native Image Cache HOC React Native Higher Order Component that adds advanced caching functionality to the react native Image component. Feature

Reid Mayo 277 Jan 2, 2022
plugin for react native that adds an listener for the battery status of a device

react-native-battery A cross-platform React Native module that returns the battery level/status of a device. Supports iOS and Android. Package Install

Olajide Ogundipe Jr 49 Nov 4, 2021
:control_knobs: Adds an option to your dev menu to console.log the contents of your AsyncStorage.

Async Storage Dev Menu Item This module adds an item to your shaky menu that lets you see what's in your AsyncStorage by logging it to your (JavaScrip

Jan Söndermann 86 Dec 1, 2021
react-native-webp adds support for WebP images for react-native components.

react-native-webp adds support for WebP images for react-native components. Installation npm install react-native-webp --save rnpm link (or manually a

Daniel Basedow 68 Jun 3, 2021
react-native-webp adds support for WebP images for react-native components.

react-native-webp adds support for WebP images for react-native components. Installation npm install react-native-webp --save rnpm link (or manually a

Daniel Basedow 68 Jun 3, 2021
Resolution switcher adds the ability to select the video quality in video.js player.

Video.js Resolution Switcher Resolution switcher for video.js v5 Example Working examples of the plugin you can check out if you're having trouble. Or

Kasper Moskwiak 385 Jan 15, 2022
Adds more hotkey support to video.js

videojs-hotkeys Introduction Usage CDN version Self hosted Enable the plugin Options Custom Hotkeys and Overrides Override existing hotkeys Create new

Chris 168 Dec 12, 2021
Adds server side rendering support to React Relay

Isomorphic React Relay Enables server-side rendering of React Relay containers. If you use react-router-relay you might also become interested in isom

Denis Nedelyaev 246 Dec 23, 2021
Addon for the 'react-beautiful-dnd' that adds natural dragging animation

Info Addon for the react-beautiful-dnd that adds natural dragging animation

Dmytro Lytvynenko 36 Oct 12, 2021
Code Surfer adds code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to MDX Deck slides.

Code Surfer Help to keep this project alive with your support ❤️ Code Surfer adds code highlighting, code zooming, code scrolling, code focusing, code

Rodrigo Pombo 5.6k Jan 13, 2022
Zero-Configuration Reactive forms for Svelte

Formula + Beaker Δ→ Reactive Forms for Svelte Documentation Changelog svelte-formula is a Library for use with Svelte that super-charges your ability

Tane Piper 102 Jan 2, 2022
Reactive forms for react and react native, using hooks and [email protected]

Reactive forms for react and react native, using hooks and [email protected] Installation: npm install -s react-fluid-form mobx mobx-react yup lodash // or: yarn

Misael dos Santos 6 Dec 22, 2021
A simple javascript utility for conditionally joining classNames together

Classnames A simple JavaScript utility for conditionally joining classNames together. Install with npm, Bower, or Yarn: # via npm npm install classnam

Jed Watson 14.9k Jan 13, 2022
Incredibly simple utility for (sort of) using viewport units with React Native.

react-native-viewport-units Incredibly simple utility for (sort of) using viewport units with React Native. Install $ npm install react-native-viewpor

Jeff Stout 155 Jan 12, 2022
A simple javascript utility for conditionally joining classNames together

Classnames A simple JavaScript utility for conditionally joining classNames together. Install with npm, Bower, or Yarn: # via npm npm install classnam

Jed Watson 14.9k Jan 13, 2022