Question

提交表单后，我无法重置表单字段，但是如果我删除mask =“ + 1 000 000-0000”，那么我们可以重置表单

<input class="form-control" [(ngModel)]="mobile" formControlName="mobile" type="tel" placeholder="Please enter a vaild mobile number" (keyup)="showDefaultRelationMobileerror($event)"  [dropSpecialCharacters]="false" mask="+1 000 000-0000">

Answer 1

自Angular 6（https://angular.io/api/forms/FormControlName#use-with-ngmodel）起，不建议同时使用ngModel和formControlName。您可以使用其中一个。

要在Angular中使用反应式表单，请使用formControlName，而要使用模板驱动的表单，则可以使用ngModel。

对于掩码+1 000 000-0000，ngx-mask无法将1识别为默认模式（请参见此处的默认模式：https://www.npmjs.com/package/ngx-mask#then）。您可以改为设置prefix属性

<form [formGroup]="form">
    <input type="tel"
           class="form-control" 
           formControlName="mobile" 
           placeholder="Please enter a vaild mobile number" 
           (keyup)="showDefaultRelationMobileerror($event)"  
           [dropSpecialCharacters]="false" 
           prefix="+1"
           mask=" 000 000-0000"
    />
    <button (click)="resetForm()">Reset</button>
</form>

要重置表单值，请使用组件中formControl类中的reset()方法

    form: FormGroup;

    ngOnInit() {
        this.form = new FormGroup({
            'mobile': new FormControl()
        });
    }

    resetForm() {
        this.form.get('mobile').reset()
    }

如果使用mask ='+ 1 000 000'，则表格值不会以角度重置

1 个答案: