输入类型number value在angular响应式表单中出错

Question

我有一个角反应形式的输入字段，类型为数字，用于存储价格值，但是当我填充它并控制其值时，它会给我错误的值，例如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!! :-)nn" + JSON.stringify(this.registerForm.value, null, 4)
);
}
onReset() {
this.submitted = false;
this.registerForm.reset();
}
}

Answer 2

有几种方法可以以反应形式绑定和显示<input>或number的数据。比如在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演示链接。