Question

我有一个输入，可以通过搜索项目或单击复选框来填写。当您单击复选框时，输入中必须填充默认值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>

Answer 1

您可以做的是在复选框中添加(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在该字段中的声明，它只会更改一次。要解决这个问题，您可以做两件事：

将[(ngModel)]与没有操作的属性一起使用。
使用(ngModelChange)刷新this.currentElement.field的值

您可以在此处查看实时示例：

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

通过单击复选框填充输入

1 个答案: