具有Angular 2的动态ngModel

Question

我希望根据所选的#mainSearchSelector在#mainFilter中写入时，使输入#filterIdc，＃filterLogin和#filterOpnNro动态自动完成。

示例：当我选择选项＆＃34;登录＆＃34;在#mainSearchSelector中，我希望#mainFilter的值只能在#filterLogin输入中复制

为此，我需要#mainFilter的ngModel在我选择时动态更改并在#mainSearchSelector中选项。有谁知道这样做的语法？

<div class="content-body">
  <div class="search_container" *ngIf="filter">
    <p><span>Buscar Operaciones</span></p>
    <div class="row">
      <div class="col-lg-3">
        <div class="form-group label-static">
          <select [(ngModel)]="mainSearchSelector" (ngModelChange)="onChangeMainFilter($event)" class="form-control" name="mainSearchSelector" id="mainSearchSelector">
            <option value="" selected disabled>Buscar por</option>
            <option value="idc">IDC</option>
            <option value="login">Credimás</option>
            <option value="opnNro">Número de operación</option>
          </select>
        </div>
      </div>
      <div class="col-lg-9">
        <div class="form-group label-static">
          <input [(ngModel)]="filter.mainFilter" name="mainFilter" maxlength="{{maxLengthInput}}" minlength="{{maxLengthInput}}" type="text" class="form-control" placeholder="Ingresa lo que deseas buscar" [value]=searchText>
        </div>
      </div>
    </div>
  </div>
  <div id="additional-filters" class="collapse">
    <div class="col-lg-4 col-md-4">
      <div class="form-row">
        <div class="form-title">
          N° de operación y tarjeta
        </div>
        <div class="form-input-container">
          <div class="row">
            <div class="col-lg-5">
              <input id="filterIdc" [(ngModel)]="filter.idc"  [disabled]="mainSearchSelector=='idc'" type="number" class="form-control" placeholder="N° de operación">
            </div>
            <div class="col-lg-5">
              <input id="filterLogin" [(ngModel)]="filter.login" [disabled]="mainSearchSelector=='num_tarjeta'" type="number" class="form-control" placeholder="N° de tarjeta">
            </div>
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-title">
          Tipo y número de documento
        </div>
        <div class="form-input-container">
          <div class="row">
            <div class="col-lg-5">
              <select [(ngModel)]="filter.idTypeSelector" (ngModelChange)="onChangeMainFilter($event)" [disabled]="mainSearchSelector==='cod_operacion'" class="form-control">
                <option value="dni">DNI</option>
                <option value="passport">Pasaporte</option>
              </select>
            </div>
            <div class="col-lg-5">
              <input id="filterOpnNro" [(ngModel)]="filter.opnNro" [disabled]="mainSearchSelector==='cod_operacion'"  type="number" class="form-control" placeholder="N° de documento">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

这是我的main-view.component.ts：

import { Component, OnInit, Input } from "@angular/core";
import { FormsModule, FormBuilder, FormGroup }   from '@angular/forms';
import 'rxjs/operator/finally';

//models
import { Session }              from './models/session';
import { Client }              from './models/client';
import { Operation }              from './models/operation';
import { FilterOperations }              from './models/filterOperations';

//services
import { MainViewService }       from './services/main-view.service';

//constants
import constantsValues = require("../../../core/constants/constants");
import requestService = require("./services/input");

@Component({
    templateUrl: './app/views/operations/main-view/templates/main-view.html',
    styleUrls: ['./app/views/operations/main-view/css/main-view.css'],
    providers: [ MainViewService, FormBuilder ]
})
export class MainViewOperations implements OnInit {
    //cambiar el this por el vm
    @Input() filter: FilterOperations;
    complexForm : FormGroup;
    clientFound: Client;
    sessionList: Session[];
    operationList: Operation[];
    operationCount: number;
    mainSearchSelector: string;
    maxLengthInput: number;
    searchText: string;

    errorMessage: string;
    isLoading: boolean = false;
    opnClsCod = {
        "monetaria" : "monetaria",
        "no_monetaria" : "no monetaria"
    };

    constructor (private operationSearchService: MainViewService, private builder: FormBuilder) {
    }

    ngOnInit() {
        this.filter = new FilterOperations();
        this.filter.monCodInfos = [];
        this.mainSearchSelector = "";
        this.maxLengthInput = 9;
    }
    onChangeMainFilter(newValue) {
        this.mainSearchSelector = newValue;
        switch (this.mainSearchSelector) {
            case "idc":
                this.maxLengthInput = 9;
                break;
            case "num_tarjeta":
                this.maxLengthInput = 16;
                break;
            case "cod_operacion":
                this.maxLengthInput = 8;
                break;
            default:
                break;
        }
        this.searchText = "";
    }

    findOperations() {
        //Call to the server
    }
}