Forms 角度7 FormControl将输入从数字转换为字符串

我有一个FormGroup，我在其中定义了一个FormControl，使用这种方式：

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

html:

我还尝试使用

作为数字

或

来转换值，但如果我打印表单的值，则会将其打印为字符串而不是数字。
此外，当我加载页面时，我的输入默认显示为0：

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

---

正确的方法是什么？我很困惑。

解决方案：

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

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

您可以简单地检查模型中的更改（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">

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