Angular 7 FormControl将输入从数字转换为字符串答案

【问题标题】：Angular 7 FormControl cast input from number to stringAngular 7 FormControl将输入从数字转换为字符串
【发布时间】：2019-07-16 09:31:49
【问题描述】：

我有一个 FormGroup，我在其中定义了一个这样使用的 FormControl：

myForm: FormGroup = new FormGroup({ 
    ...
    code: new FormControl('', Validators.pattern('^[0-9]*$')),
    ...
  });

html:

<mat-form-field class="col">
                <input formControlName="code" matInput>
              </mat-form-field>

我希望这个输入是一个数字，但我无法正确转换它。我已经注册到表单控件的vauleChanges 事件并这样做了：

this.myForm.controls['code'].valueChanges.subscribe(d => {
     if(this.myForm.controls['code'].valid){
      this.myForm.get('code').setValue( +this.myForm.controls['code'].value);
      }
    })

我也尝试过使用 as number 或 <number> 转换值，但如果我打印表单的值，我会将其打印为字符串而不是数字。
此外，当我加载页面时，我的输入默认显示为 0：

但我没有在任何地方设置 0，我不希望它显示。
我尝试将输入类型指定为数字，但它显示了箭头，我不希望它们显示。

实现这一点的正确方法是什么？我很困惑。

【问题讨论】：

标签： forms angular7 angular-forms

【解决方案1】：

解决方案：

你可以简单地检查模型的变化(ngModelChange)="validate()"检查validate()方法。

HTML 文件：

<input id="code" class="form-control" [(ngModel)]="code" required (ngModelChange)="validate()">

<div *ngIf="codeValidator.invalid" class="alert alert-danger">
    <div *ngIf="codeValidator.errors.required">
        Field must not be empty.
    </div>
    <div *ngIf="codeValidator.errors.pattern">
        Only numeric values are allowed.
    </div>
</div>

<input type="text" [(ngModel)]="numberValue">

TS 文件：

  code = 0;
  codeValidator: any = {};
  numberValue: any;


  validate() {
    console.log("Validating");
    this.codeValidator = new FormControl(this.code, [
      Validators.required,
      Validators.pattern('^[0-9]*$')
    ]);
    // You could simply use isNaN
    this.numberValue = isNaN(this.code) || this.code === 0 ? '' : +this.code;
  }

【讨论】：