Блог

У меня есть входные данные, которые можно заполнить, выполнив поиск по элементу или нажав на флажок. При нажатии на флажок ввод должен быть заполнен значением по умолчанию valueText . Как установить флажок и установить значение [ngModel] .

  public foundedElement: Element[];
 public defaultValue: boolean;
 public valueText = "text";

 constructor(public elementFacade: ElementFacade) {}

 addField(value) {
    return currentElement.field = value;
 }

 searchElement(e): void {
    const {value} = e.target;
    if (value.length > 1) {
      this.elementFacade.getAll({name: value}).subscribe(el => this.foundedElement = el);
    }
  }
  

  <input-container>
       <input #elementInput
              [mdAutocomplete]="autoElement"
              (input)="searchElement($event)"
              [ngModel]="currentElement ? currentElement.field : ''"
       />
       <md-autocomplete #autoElement="mdAutocomplete">
         <md-option
           *ngFor="let el of foundedElement"
           (onSelectionChange)="addField(el.name)">
           {{el.name}}
         </md-option>
       </md-autocomplete>
     </input-container>
      <md-checkbox  [checked]="defaultValue">Default</md-checkbox>
  

Что вы можете сделать, так это добавить (change) событие в флажок, чтобы всякий раз, когда вы нажимаете его, оно меняло значение ввода:

 <md-checkbox  [checked]="defaultValue" (change)="onCheckChange()">Default</md-checkbox>
  

И в вашей ts вы добавляете функцию:

   onCheckChange() {
    this.inputValue = valueText;
  }
  

Где this.inputValue это ngModel значение ввода, которое вы хотите изменить. В вашем сценарии, если ввод является #elementInput, то у вас должно получиться что-то вроде:

 onCheckChange() {
    this.currentElement.field  = valueText;
  }
  

При таком подходе это изменится только один раз, из-за объявления ngModel в этом поле.
Чтобы решить эту проблему, вы могли бы сделать две вещи:

1. Используйте [(ngModel)] со свойством без операций.
2. Используйте (ngModelChange) для обновления значения this.currentElement.field

Вы можете проверить живой пример здесь:

https://stackblitz.com/edit/angular-stack-checkbox-55528725?file=src/app/input/input.component.html