Как очистить поле ввода после отправки данных в угловых?

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

Я думаю, вы должны использовать Реактивные формы и вызывать метод reset () - для формы.

Вы также можете вручную сбросить поля формы, как предложено выше SiddAjmera.

Answer 2

Я думаю, что Реактивная форма - лучший способ сделать это, https://angular.io/guide/reactive-forms используйте эту ссылку, чтобы сбросить поле ввода, назначив пустую строку, это не способ сделать это, она дастошибка в каком-то состоянии

Answer 3

Поскольку вы используете двустороннюю привязку данных к userObject.chatmessage, просто установите пустую строку в вашем компоненте.

В вашем классе ChatComponent TypeScript просто сделайте следующее:

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