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

Цель

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

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

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

Создание

Начните с установки пакета rxweb из npm, используя следующую команду:

npm i @ rxweb / валидаторы реактивной формы

Зарегистрируйте модуль RxReactiveFormsModule, как показано ниже, в исходном модуле:

@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 {}

Модель

Эта модель содержит класс Named User с необходимыми свойствами, в котором используется аннотация из валидаторов rxweb, модель может содержать одну или несколько аннотаций.

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

export class User {

  @required()
  firstName: string;

  @required()
  lastName: string;

  @required()
  Email: string;
}

Компонент модели

Используя указанную выше модель, FormGroup связывается с использованием метода formGroup. RxFormBuilder отвечает за формирование userFormGroup, как указано ниже в коде. FormGroup состоит из свойств модели пользователя.

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());
  }
}

HTML

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

Сообщения проверки отображаются из глобально настроенного компонента приложения во время инициализации приложения, как показано ниже:

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

Код HTML:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic Rxweb Reactive Form Validators
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card>
    <ion-card-content>
      <form [formGroup]="userFormGroup" novalidate (ngSubmit)="userFormGroupSubmit()">
        <ion-list>
          <ion-item-divider color="primary">User Profile Info</ion-item-divider>
          <br>
          <ion-item-divider color="light">
            <ion-label>
              General
            </ion-label>
          </ion-item-divider>
          <!-- FirstName Field. -->

          <ion-item
            [class.has-error]="(userFormGroup.get('firstName').hasError('required') || userFormGroup.get('firstName').hasError('required')) && userFormGroup.get('firstName').touched">
            <ion-label position="floating">FirstName *</ion-label>
            <ion-input type="text" formControlName="firstName"></ion-input>
          </ion-item>
          <ion-item lines="none"
            *ngIf="(userFormGroup.get('firstName').hasError('required') || userFormGroup.get('firstName').hasError('required')) && userFormGroup.get('firstName').touched">
            <div class="error-message">
              <small *ngIf="userFormGroup.get('firstName').hasError('required')">
                {{ userFormGroup.controls.firstName.errors.required.message}}.<br /></small>
            </div>
          </ion-item>
          <!-- LastName Field. -->
          <ion-item
            [class.has-error]="(userFormGroup.get('lastName').hasError('required') || userFormGroup.get('lastName').hasError('required')) && userFormGroup.get('lastName').touched">
            <ion-label position="floating">LastName *</ion-label>
            <ion-input type="text" formControlName="lastName"></ion-input>
          </ion-item>

          <ion-item lines="none"
            *ngIf="(userFormGroup.get('lastName').hasError('required') || userFormGroup.get('lastName').hasError('required')) && userFormGroup.get('lastName').touched">
            <div class="error-message">
              <small *ngIf="userFormGroup.get('lastName').hasError('required')">
                {{ userFormGroup.controls.lastName.errors.required.message}}.<br /></small>
            </div>
          </ion-item>

          <!-- Email Field. -->
          <ion-item
            [class.has-error]="(userFormGroup.get('Email').hasError('required') || userFormGroup.get('Email').hasError('required')) && userFormGroup.get('Email').touched">
            <ion-label position="floating">Email *</ion-label>
            <ion-input type="email" formControlName="Email"></ion-input>
          </ion-item>
          <ion-item lines="none"
            *ngIf="(userFormGroup.get('Email').hasError('required') || userFormGroup.get('Email').hasError('required')) && userFormGroup.get('Email').touched">
            <div class="error-message">
              <small
                *ngIf="userFormGroup.get('Email').hasError('required')">{{ userFormGroup.controls['Email'].errors.required.message}}.<br /></small>

            </div>
          </ion-item>
          <ion-row no-padding justify-content-center>
            <ion-col col-auto text-right>
              <ion-button [disabled]='!userFormGroup.valid' type="submit" fill="clear" size="small" color="primary">
                <ion-icon name='send' slot="start"></ion-icon>
                Send
              </ion-button>
            </ion-col>
          </ion-row>
        </ion-list>

      </form>
    </ion-card-content>
  </ion-card>
</ion-content>

Вывод

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