Интуитивные декораторы RXWeb для угловых реактивных форм

Автор оригинала: Ushmi Dave.

В этой статье мы обсуждаем RXWeb Decorators, которые помогают нам уменьшить код шаблона HTML и сделать наш код более читабельным; так же:

Показать сообщения об ошибках условно.
Отключение FormControl условно без подписки любых формоблочных валючений,
Условно назначить класс на элементе.

Если вы не знаете о проверке на основе декоратора в реактивных формах, используя RXWeb, то я бы предложил ссылаться на эту хорошую статью Реактивные формы на основе декоратора в угловом углу – эффективный способ проверки форм

Импортируйте декоратор после Установка @ RxWeb/Реактивные формы-валидаторы, после установки импорта RxreaCtiveFormsModule В основном модуле углового проекта

Мы приезжаем в состав многих случаев, когда нам нужно отключить контроль условно, другими словами отключить контроль на основе другого значения ввода. В этом случае поле лицензионного номера становится только тогда, когда возраст больше, чем равный 18

Пример Stackblitz: Открыть

Это достигается с использованием следующих шагов

1) user.model.ts:

import { disable, prop } from "@rxweb/reactive-form-validators";
import { AbstractControl } from "@angular/forms";

export class User {
  @prop()
  age: number;

  @disable({
    conditionalExpression: function(control: AbstractControl) {
      return this.age <= 18 ? true : false;
    }
  }) 
  @prop()
  licenseNumber: string;
}

2) user.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormGroup } from "@angular/forms";

import { RxFormBuilder } from '@rxweb/reactive-form-validators';
import { User } from './user.model';

@Component({
    selector: 'app-user-add',
    templateUrl: './user-add.component.html'
})

export class UserAddComponent implements OnInit {
    userFormGroup: FormGroup;
    constructor(private formBuilder: RxFormBuilder) { }

    ngOnInit() {
        let user = new User();
        this.userFormGroup = this.formBuilder.formGroup(user);
    }
}

3) user.component.html:


  
    Age
    
    
  
      License Number

Настройка класса CSS на основе некоторого состояния в формате. В этом случае недействительный класс применяется, когда состояние касается или загрязнена и имеет ошибки

Пример Stackblitz: Открыть

1) user.model.ts:

import {  prop,elementClass,alpha } from "@rxweb/reactive-form-validators"
import { AbstractControl } from "@angular/forms"

export class User {


   @elementClass({
       conditionalExpression: function (control:AbstractControl) {
           return (control.touched || control.dirty) && control.errors ? 'has- error' : '';
       }})
   @alpha()
   userName: string;
}

2) user.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormGroup } from "@angular/forms";

import { RxFormBuilder } from '@rxweb/reactive-form-validators';
import { User } from './user.model';

@Component({
    selector: 'app-user-add',
    templateUrl: './user-add.component.html'
})

export class UserAddComponent implements OnInit {
    userFormGroup: FormGroup;
    constructor(private formBuilder: RxFormBuilder) { }

    ngOnInit() {
        let user = new User();
        this.userFormGroup = this.formBuilder.formGroup(user);
    }
}

3) user.component.html:


    
      User Name

Этот декоратор используется для отображения ошибок в зависимости от некоторого состояния. В этом случае сообщения об ошибках отображаются, когда нажата кнопка отправки

Пример Stackblitz: Открыть

1) Форма. Model.ts:

import { required,error,prop } from "@rxweb/reactive-form-validators"
import {AbstractControl } from "@angular/forms"
export class FormField{
  
  @prop()
  action:string;

  @error({conditionalExpression:function(control:AbstractControl){ return this.action === "submit"}})
  @required()
  firstName:string;

  @error({conditionalExpression:function(control:AbstractControl){ return this.action == "submit"}})
  @required()
  userName:string;
 
}

2) user.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormGroup,Validators } from "@angular/forms"

import { RxFormGroup,FormGroupExtension,RxFormBuilder,FormBuilderConfiguration,RxwebValidators } from '@rxweb/reactive-form-validators';
import { FormField } from './form.model';


@Component({
    selector: 'app-user-add',
    templateUrl: './user-add.component.html'
})
export class UserAddComponent implements OnInit {
    errorObject = {}
    userInfoFormGroup: FormGroup

    constructor(
        private formBuilder: RxFormBuilder
    ) { }

    ngOnInit() {
      var formField = new FormField();
        this.userInfoFormGroup =this.formBuilder.formGroup(formField);
    }

    submit(){
      if(this.userInfoFormGroup.invalid)
        this.userInfoFormGroup.controls.action.setValue("submit");
      
    }
}

3) user.component.html:


  
    First Name
    
    {{userInfoFormGroup.controls.firstName["errorMessage"]}}
  
  
    User Name
    
    {{userInfoFormGroup.controls.userName["errorMessage"]}}

Эта статья показывает некоторые из лучших и наиболее используемых случаев, которые выполняются в наиболее интуитивно понятном и элегантном способе с использованием моделей на основе подхода, чтобы узнать больше о других полезных декораторах. Документация раздел

Читайте ещё по теме: