Question

我正在使用NGX-Schema-Form https://github.com/makinacorpus/ngx-schema-form来基于json对象呈现表单字段。

我的问题是：如何将自定义验证错误消息添加到我的架构，以及如何在ui（Bootstrap 4.1 based）上正确显示它们。

以下是标准架构格式的示例：

注意： 模式，minLength，maxLength

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-touched时如何覆盖标准字符串窗口小部件以显示此错误。

一个粗略的例子：

<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>

我正在为企业级实施寻求可靠的解决方案。

Answer 1

您可以在应用程序中使用 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>

ngx-schema-form：添加自定义验证消息（Angular 6）吗？

1 个答案: