如何清除/重置Angle Dart中整数输入字段中的无效输入?

时间:2018-09-21 04:50:52

标签: angular dart material-design angular-dart

我是新手。我最近开始开发一个Web应用程序,该应用程序允许用户编辑和列出用户详细信息。我正在使用“ ngForm”创建表单和材料输入,以从用户那里获取输入。我使用“ ngModel”绑定数据。
我在表单中有一个“清除”按钮,可通过调用form.reset()清除所有表单字段。但是,这不会清除输入无效的字段。我有一个“数字”类型的输入字段(年龄)。当用户在其中键入字符串并单击清除按钮时,输入不会被清除。
这是代码:

<div>
  <div *ngIf="user != null">
    <h2>{{user.name}}</h2>
    <div>
      <form #editUserForm="ngForm">
        <material-input [(ngModel)]="user.name"
                        ngControl="userName"
                        #userNameInput="ngForm"
                        label="user name" type="text"
                        error="{{getError('name')}}"
                        required>
        </material-input>
        <material-input [(ngModel)]="user.age"
                        ngControl="age"
                        #ageInput="ngForm"
                        label="age"
                        type="number"
                        error="{{getError('age')}}"
                        required>
        </material-input>
        <material-input [(ngModel)]="user.emailId"
                        ngControl="emailId"
                        #emailIdInput="ngForm"
                        label="email id"
                        type="text"
                        error="{{getError('email_id')}}"
                        required>
        </material-input>
        <div>
          <material-button (click)="clearFieldErrors()"
                           (trigger)="save()"
                           raised>
            Save
          </material-button>
          <material-button (click)="editUserForm.reset()">
            Clear
          </material-button>
          <material-button (click)="goBack()"
                           raised>
            Back
          </material-button>
        </div>
      </form>
    </div>
  </div>
</div>

我发现错误是由于在整数输入字段(age)中输入的字符串被视为“ null”,因此在调用editUserForm.reset()时没有任何反应。谁能帮帮我吗?

0 个答案:

没有答案