Как сделать ионные реактивные формы с использованием RXWeb

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

В этой статье мы узнаем, как создать реактивную форму в приложении кроссплатформы, который использует подход на основе модели RXWEB для создания и проверки формы

Эффективный способ увеличения возможностей приложения предприятия с использованием хорошо разработанной формы с правильными входными валидациями

Слеем внизу описывает случайный случай, когда пользовательская регистрация, в которой есть три поля FirstName, фамилия и адрес электронной почты, и все эти вещи являются обязательными для процесса регистрации

Чтобы использовать элегантный подход, чтобы построить эту форму простым способом без написания гораздо сложной бизнес-логики, участвующей в компоненте

Это может быть достигнуто с использованием @ rxweb/Реактивные формы-валидаторы Что имеет подход к разработке формы валидации на основе модели и имеет много полезных встроенных валидаций, таких как уникальный выбор, сравните и т. Д.

Формы на основе модели содержит класс модели, имеющего инициализированные свойства с использованием валидаторов, которые используются для создания формы в приведенной форме, компонентной и HTML-архитектуре. Для получения дополнительной информации о модельных формах, пожалуйста, обратитесь Упрощенные угловые реактивные формы

Начните с установки пакета RXWEB из NPM с помощью команды ниже:

NPM I @ RxWeb/Реактивные формы-валидаторы

Зарегистрировать RxreaCtiveFormsModule Модуль, как показано ниже в модуле root (App):

@NgModule({
  declarations: [AppComponent,UserComponent],
  entryComponents: [],
  imports: [BrowserModule,RxReactiveFormsModule, CommonModule,FormsModule, ReactiveFormsModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Давайте начнем реализацию, создав класс модели

Эта модель содержит класс с именем пользователя с необходимыми свойствами, в которых аннотация используется из валидаторов RXWEB, в этой модели могут содержать одну или несколько аннотации

import { required } from '@rxweb/reactive-form-validators';

export class User {

  @required()
  firstName: string;

  @required()
  lastName: string;

  @required()
  Email: string;
}

Использование вышеуказанной модели Формагруппу связана с использованием Форменная группа Метод RxFormBuilder который отвечает за формирование пользовательской группировки, как упомянуто ниже в коде. Формагруппа, которая состоит из свойств модели пользователя в виде FORMCONTROL, а также приложенные валидации.

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',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
})
export class UserComponent implements OnInit {
  userFormGroup : FormGroup
  constructor(private formBuilder: RxFormBuilder) { }

  ngOnInit() {
    this.userFormGroup = this.formBuilder.formGroup(User);
  }
 userRegistrationFormGroupSubmit() {
    console.log(this.userFormGroup.getRawValue());
  }
}

Поскольку мы используем ионные рамки, которые используются для разработки приложений гибридного кроссплатформы, в котором мы будем использовать ионные теги для создания его совместимости для мобильных и веб-обоих.

Здесь сообщения проверки отображаются из глобально сконфигурированной в компоненте приложения во время инициализации приложения, как показано ниже

  initializeApp() {
    ReactiveFormConfig.set({"validationMessage":{"required":"This field is required."}});
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

HTML-код:

  
    
      Ionic Rxweb Reactive Form Validators
    
  


  
    
      

        
          User Profile Info
          

          
            
              General
            
          
          

          
            FirstName *
            
          
          
            

              
                {{ userFormGroup.controls.firstName.errors.required.message}}.

            
          
          
          
            LastName *
            
          

          
            

              
                {{ userFormGroup.controls.lastName.errors.required.message}}.

            
          

          
          
            Email *
            
          
          
            

              {{ userFormGroup.controls['Email'].errors.required.message}}.


            
          
          
            
              
                
                Send
              
            
          
        

      
    
  

Вышеуказанное изображение отображает выход после завершения следующего процесса

В этой статье мы изучили создание образца на основе модели реактивной формы и используя подход к приводу в модель наряду с интеграцией ** RXWeb ** Валидации в ионном приложении.