发送消息以使用模式验证输入

Question

我有一个组件 ValidationMessage 用于显示验证消息。 ValidationMessage 用于 VendorComonent；另外，我有一个 validationmessage_vendor ts 文件，其中包含将显示在 div 中的消息

我的问题是它适用于任何验证，如 required 或 minlength，但不适用于我正在使用的模式

如何在validationmessage_vm.ts 文件中写入type: 'pattern(\'^[0-9]{7}$\')' 才能正常工作？

.ts方法涉及到表单

  initForm() {
    this.activateVendorForm = this.fb.group({
      vendorNumber: ['', [Validators.required, Validators.pattern('^[0-9]{7}$'), Validators.maxLength(7), Validators.minLength(7)]]
    })
  }

validationmessage_vm.ts

 const merchant_dashboard_vm = {
        'vendorNumber': [
            { type: 'required', message: 'Vendor Number is required'},
            { type: 'pattern(\'^[0-9]{7}$\')', message: 'Vendor Number should have 7 numbers'},
          ],
    };
    export default merchant_dashboard_vm;

validationmessage.component.ts

export class ValidationMessageComponent implements OnInit {

  @Input() vm: string = '';
  @Input() control: any = null;
  @Input() controlName: string = '';

  validationMessages = null;

  ngOnInit() {
    if(this.vm == 'merchant_dashboard_vm') this.validationMessages = merchant_dashboard_vm;
  }
}

validationmessage.component.html

<div class="from-group" *ngFor="let vm of validationMessages[controlName]">
        <div class="alert alert-danger" *ngIf="control.hasError(vm.type)">
          {{vm.message}}
        </div>
</div>

Answer 1

验证器中的模式应该用forward 和backward 斜杠而不是双引号覆盖。

Validators.pattern(/^[0-9]{7}$/)

希望这会有所帮助！

 initForm() {
    this.activateVendorForm = this.fb.group({
      vendorNumber: ['', [Validators.required, Validators.pattern(/^[0-9]{7}$/), Validators.maxLength(7), Validators.minLength(7)]]
    })
  }