Question

我有一个mat-select下拉列表和一个input字段。单击button后，它将提交数据。提交数据后，我想清除输入字段，但是我不想清除mat-select下拉列表。我该怎么办？

chat.component.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>

Answer 1

我认为您应该使用Reactive forms并在表单上调用reset（）方法。

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

Answer 2

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

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

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

Answer 3

我认为反应式表单是最好的方式，https://angular.io/guide/reactive-forms使用此链接可以做到这一点通过分配空字符串来重置输入字段不是这样做的方法，它将在某些情况下给出错误

Answer 4

我认为在使用反应式表单协议时执行此操作的方法是单击.setValue('')。

因此，您的发送消息看起来像这样。

sendMessage() {
   // Operations here prior to resetting value...
   this.userObjectField.setValue('');
}

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

4 个答案: