ngx-schema-form: Добавить пользовательские сообщения проверки (Angular 6)? - PullRequest
Новая
       6

ngx-schema-form: Добавить пользовательские сообщения проверки (Angular 6)?

0 голосов
/ 25 июня 2018

Я использую NGX-Schema-Form https://github.com/makinacorpus/ngx-schema-form для визуализации полей формы на основе объекта json.

У меня вопрос: как добавить настраиваемые сообщения об ошибках проверки в мою схему, а также как правильно их отображать в пользовательском интерфейсе (Bootstrap 4.1 based).

Вот пример стандартного формата схемы:

Примечание: Шаблон, минимальная длина, максимальная длина 

mySchema = {
"properties": {
    "cellphoneNumber": {
        "type": "string",
        "title": "Cellphone number",
        "placeholder": "e.g. 082 320 2121",
        "widget": {
            "id": "string"
        },
        "pattern": "^\\d{10}$",
        "minLength": 5,
        "maxLength": 12
    }
}

Но что я хотел бы сделать: 

mySchema = {
"properties": {
    "cellphoneNumber": {
        "type": "string",
        "title": "Cellphone number",
        "placeholder": "e.g. 082 320 2121",
        "widget": {
            "id": "string"
        },
        pattern: {
            value: '^\\d{10}$',
            message: 'Cellphone number must be 10 digits'
        },
        minLength: {
            value: '5',
            message: 'Please enter at least 5 characters'
        }
        maxLength: {
            value: '14',
            message: 'Please enter no more than least 14 characters'
        }
    }
}

Есть идеи?

И затем также, как переопределить стандартный виджет строки, чтобы показать эту ошибку, если форма и поле ng-dirty и ng-touch.

Грубый пример: 

<div class="error mt-2" *ngIf="control.errors && control.pristine == false || control.touched == true">
  <div *ngFor="let err of control.errors">
    {{ err.message }}
  </div>
</div>

Я ищу надежное решение для внедрения на уровне предприятия.

1 Ответ

0 голосов
/ 25 июня 2018

Вы можете использовать FormsModule, ReactiveFormsModule в своем приложении для этого.

Пожалуйста, следуйте инструкциям.

Импорт FormsModule, ReactiveFormsModule в файл module.ts. 

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { emailRegexp, passwordRegexp } from '../../constants'; // if you have any email regex for validation otherwise remove it.

Добавить в @NgModule: 

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  declarations: [
        AppComponent
  ],
})
export class AppModule {
}

Теперь перейдите к компоненту, где ваша форма нуждается в валидации: 

import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';

Инициализация в вашем конструкторе: 

   constructor(
        private formBuilder: FormBuilder,
    ) { }

Создайте валидатор вашей формы: (Я использую для входа в систему): 

    // login form validations
    this.loginForm = this.formBuilder.group({
        email: ['', Validators.compose([Validators.required)])], // If you don't have any email regex. otherwise write this=>             email: ['', Validators.compose([Validators.required, Validators.pattern(emailRegexp)])],

        password: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
    });
}

Теперь создайте свою форму (в HTML) следующим образом: 

    <form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && login()" novalidate>
              <div *ngIf="loginError" class="form-group">
                  <div class="">
                    <p class="loginError">Incorrect Email/Password </p>
                  </div>

              <input type="email"  formControlName="email">

            <p *ngIf="loginForm.controls.email.touched && loginForm.controls.email.errors && loginForm.controls.email.errors.pattern"
              class="error-message">
              Invalid Email </p>

            <p *ngIf=" loginForm.controls.email.touched && loginForm.controls.email.errors && loginForm.controls.email.errors.required && !loginForm.controls.email.errors.pattern"
              class="error-message">
              Email is required </p>
          </div>

      <div class="form-group row">
        <div class="col-12">
          <input autocomplete="off" type="password" (focus)="focusFunction()" placeholder="Password" formControlName="password" class="form-control">
        </div>
        <div *ngIf="loginForm.controls.password.touched">
          <p *ngIf="loginForm.controls.password.errors && loginForm.controls.password.errors.required " class="error-message">Password is required </p>
          <p *ngIf=" loginForm.controls.password.errors && loginForm.controls.password.errors.minlength" class="error-message"> Min. 8 characters required.</p>
        </div>
      </div>

      <div class="form-group row">
        <div class="col-12">
          <button [disabled]="!loginForm.valid" type="submit" >
          <div  class="sign-in">Sign in</div>
          </button>
        </div>
      </div>
</form>
...