以角度提交数据后如何清除输入字段？

Question

我有一个 mat-select 下拉列表和一个 input 字段。单击 button 时，它会提交数据。提交数据后，我想清除输入字段，但我不想清除 mat-select 下拉列表。我怎样才能做到这一点？

聊天组件.html

 <div>
  <mat-form-field>
    <mat-select placeholder="Select User" [(ngModel)]="userObject.userid"
      name="userid" required>
      <mat-option *ngFor="let userObj of userObj [value]="userObj.userid">
        {{userObj.username}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Type Message" [(ngModel)]="userObject.chatmessage">
  </mat-form-field>

  <button mat-raised-button color="primary" (click)="sendMessage()">
    SEND MESSAGE</button>
</div>

原文由 user10411207 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于您是双向数据绑定到 userObject.chatmessage ，因此只需在组件中将其设置为空字符串即可。

在您的 ChatComponent TypeScript 类中，只需执行以下操作：

 sendMessage() {
  // After Sending Message
  userObject.chatmessage = '';
}

原文由 SiddAjmera 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为您应该使用响应 式表单 并在表单上调用 reset() 方法。

您还可以按照 SiddAjmera 上面的建议手动重置表单字段。

原文由 Mureke 发布，翻译遵循 CC BY-SA 4.0 许可协议