angular 反應式 forms 中的輸入類型數值出錯

Question

我在 angular 反應形式的類型編號中有一個輸入字段，用於存儲價格值，但是當我填寫它並控制台它的值時，它給了我錯誤的值，比如 899，它給出了 898、896-894 這樣的值。 請告訴我為什么會這樣？
HTML：

<div class="form-group">
<label for="mrp_price" class="col-sm-2 control-label">MRP Price <span class="text-danger">*</span></label>
<div class="col-sm-10">
    <div class="form-line" [ngClass]="{ 'error': (submitted || form.mrp_price.touched) && form.mrp_price.errors }">
        <input type="number" id="mrp_price" class="form-control" placeholder="MRP price" formControlName="mrp_price">
    </div>
    <div *ngIf="(submitted || form.mrp_price.touched) && form.mrp_price.errors">
        <label *ngIf="form.mrp_price.errors.required" class="error">MRP Price is required!</label>
    </div>
</div>

這是我的TS代碼部分

 productForm = this.fb.group({
    brand: ['', Validators.required],
    title: ['', Validators.required],
    keywords: ['', Validators.required],
    mrp_price: [null, Validators.required],
    selling_price: [null, Validators.required],
    shipping_price: [null, Validators.required],
    stock: [null, Validators.required],
    sku: ['', Validators.required],
    short_description: ['', Validators.required],
    long_description: ['', Validators.required]
  });

Answer 1

請參閱此工作代碼：

HTML：

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-row">
   <div class="form-group col">
      <label for="mrp_price" class="col-sm-2 control-label">MRP Price <span class="text-danger">*</span></label>
      <div class="col-sm-10">
         <div class="form-line">
            <input type="number" id="mrp_price" class="form-control" placeholder="MRP price" formControlName="mrp_price">
         </div>
      </div>
   </div>
</div>
<div class="text-center">
   <button class="btn btn-primary mr-1">Register</button>
   <button class="btn btn-secondary" type="reset" (click)="onReset()">Cancel</button>
</div>
</form>

TS：

export class AppComponent implements OnInit {
  registerForm: FormGroup;
  submitted = false;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.registerForm = this.formBuilder.group(
      {
        brand: ["", Validators.required],
        title: ["", Validators.required],
        keywords: ["", Validators.required],
        mrp_price: [null, Validators.required],
        selling_price: [null, Validators.required],
        shipping_price: [null, Validators.required],
        stock: [null, Validators.required],
        sku: ["", Validators.required],
        short_description: ["", Validators.required],
        long_description: ["", Validators.required]
      }
    );
  }


  onSubmit() {
    this.submitted = true;
    console.log(this.registerForm.value);
    // stop here if form is invalid
    if (this.registerForm.invalid) {
      return;
    }

    // display form values on success
    alert(
      "SUCCESS!! :-)\n\n" + JSON.stringify(this.registerForm.value, null, 4)
    );
  }

  onReset() {
    this.submitted = false;
    this.registerForm.reset();
  }
}

Answer 2

有幾種方法可以綁定和顯示反應 forms 中number的<input>的數據。 就像在ngSubmit上或使用該輸入的(change)事件一樣。 您也可以使用ngModelChange事件檢查該值。 這是下面給出的我的代碼和演示 Stackblitz 鏈接=>
HTML：

<h1> Reactive Form Example </h1>

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
   <div class="form-line" >
        <input type="number" id="mrp_price" class="form-control" placeholder="MRP price" formControlName="mrp_price" (change)="onChange($event)" (ngModelChange)="ngModelDataShow($event)">
    </div>
  <input type = "submit" value = "Show value In Console">
</form>

TS：

export class AppComponent  {
  
  contactForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.createContactForm();
  }
  onChange($event){
    console.log("On change value:"+$event.target.value);
  }
  ngModelDataShow($event){
    console.log("Ng Model On change value:"+$event);
  }
  createContactForm(){
    this.contactForm = this.formBuilder.group({
      mrp_price:[''] 
    });
  }
  onSubmit() {
      console.log('Your form data : ', this.contactForm.value );
  }
}

注意：請查看STACKBLITZ 演示鏈接。