如何使 html 模式属性在 angular 中生效

Question

我正在尝试在我的 angular 表单中设置一个模式验证器。 无论我如何放入，它都不会验证模式。 我创建了一个简单的可重现示例。 [(ngModel)]="".. 必须保留。 我认为如果我使用简单的 html 这会起作用，但它不起作用。 在这个例子中，我点击了下面的链接并插入了我现有的 angular 代码。 它清楚地指出“模式”在表单提交时得到验证。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/pattern

使用像 formbuilder 这样的东西的问题是，我可以在 Angular 中找到关于验证的在线教程，它阻止我使用 [(ngModel)]。 需要能够以我现有的形式实施它。

app.component.html

<h1>form</h1>


<form role="form" (submit)="testpattern()" #testForm="ngForm">

  <input required type="text" name="riziv" [pattern]="[0-9]" [(ngModel)]="inputform.riziv">
  <button type="submit" (onclick)="testpattern()">test pattern</button>


</form>

<router-outlet></router-outlet>

应用程序组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'testout';
  inputform={riziv:''};




  constructor(
  ) { }

  testpattern(): void {
    console.log(this.inputform.riziv);
  }


}

无论我输入什么，模式都无法验证任何内容。 控制台只记录我输入的任何内容。使用 [(ngModel)] 时如何进行验证？

Answer 1

该模式工作得很好。 这是配置错误的提交按钮。 当我添加

[禁用]="adduserForm.form.invalid"

该按钮只有在图案形成正确时才可用。