Question

我希望我的号码输入只接受数字。我怎样才能做到这一点？在我的响应式表单中，我尝试使用验证器模式，但我不能。

谢谢大家。

ts.file

export class DialogFormComponent implements OnInit {

  productForm: any = FormGroup;

  constructor(private fb: FormBuilder,
    public dialogRef: MatDialogRef<DialogFormComponent>, 
    @Inject(MAT_DIALOG_DATA) public data:any) {}

  ngOnInit() {
    this.initDialogForm();
  }

  initDialogForm() {
    let produit: Produit = this.data;
    this.productForm = this.fb.group({
      id: [produit?produit.id:null],
      name: [produit?produit.name:null , Validators.required],
      price: [produit?produit.price:null , [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
      comment: [produit?produit.comment:null , Validators.required],
      date : [produit?produit.date:null,  Validators.required]
    });
  }

  onSubmit() {
    this.dialogRef.close(this.productForm.value);
    console.log(this.productForm.value);
  }

html

<div class="from-group">

                <label for="price">Prix</label>

                <input id="price" type="number" formControlName="price" 
                class="form-control">

                <div class="color-red"
                *ngIf="productForm.get('price').invalid && (productForm.get('price').dirty || productForm.get('price').touched)">
                Please provide price.

            </div>
        </div>

Answer 1

您已将输入类型指定为数字，该类型仅接受数字，不允许输入字母字符：

<input type="number">

但是，如果您想使用 Validators.pattern，则可以使用以下正则表达式：

Validators.patterns('^[0-9]+$')

您可以根据您想要的数字数量或输入是否可以接受一些特殊字符来编辑正则表达式。

角反应形式输入数字

1 个答案: