我们是否必须在Angular2 Reactive Form中将每个元素定义为FormControl？

Question

我有太多的输入元素和形式。我想在angular2中使用反应形式，但我不想将每个元素定义为formcontrol。我需要在必要时应用，如需要和自定义验证。可能吗？谢谢大家的回答。

我现在正在使用这个;

       loadFormBuild() {
    this.firmaGenelForm = this.fb.group({
      'kimlikTipiFormControl': [this.kimlikTipi],
      'tcknoFormControl': [null, Validators.compose([Validators.required, Validators.minLength(11), Validators.maxLength(11), tcknNoValidator])],
      'vergiNumarasiFormControl': [],
      'yabanciVergiNumarasiFormControl': [],
      'sahisAdiFormControl': [null, Validators.required],
      'sahisSoyadiFormControl': [null, Validators.required],
      'firmaAdiFormControl': [],
      'musteriTipiListFormControl': [null, Validators.required],
      'unvanFormControl': [null, Validators.required],
      'firmaAramaFormControl': [],
      'firmaAcilisTarihiFormControl': [],
      'sektorFormControl': [],
      'finansKoduFormControl': [],
      'musteriTemsilcisiFormControl': [],
      'grupFirmaFormControl': [],
      'tarafKoduFormControl': [],
      'riskliMüsteriFormControl': [],
      'eFaturaMusteriFormControl': [],
      'eFaturaTarihiFormControl': [],
      'firmaKapaliMiFormControl': [],
      'eArsivMiFormControl': [],
      'eArsivPostaAdresiFormControl': []
    });
  }

HTML;

<form [formGroup]="firmaGenelForm" (ngSubmit)="submitForm(firmaGenelForm.value)">

    <div class="ui-grid-row">
    <div class="ui-grid-col-1">
        <button pButton style="height:25px;width:100%;background-color: transparent;color:#5cb85c;border-color:#5cb85c"
                type="submit" label="Kaydet" icon="fa-save" iconPos="right">
        </button>
      </div>
    </div>
    <p-growl [value]="msgs"></p-growl>
    <p-panel [style]="{'margin-bottom':'5px'}">
      <header>
        <span class="ui-panel-title "
              style="font-size:14px;display:inline-block;margin-top:2px">Firma Genel Bilgileri</span>
      </header>
      <div class="ui-grid ui-grid-responsive ui-fluid ui-grid-pad">
        <div class="ui-grid-row">

          <div class="ui-grid-col-1">
            <label class="firma-label">Firma Ara:</label>
          </div>
          <div class="ui-grid-col-2">
            <p-autoComplete [(ngModel)]="searchInput" [suggestions]="filterFirmaDto"
                            (completeMethod)="filterFirma($event)" [size]="30"
                            (onSelect)="onDropdownClick(searchInput)"
                            [minLength]="3" placeholder="Firma Arayınız"
                            [formControl]="firmaGenelForm.controls['firmaAramaFormControl']">
              <template let-brand *ngFor="let filter of filterFirmaDto">
                <li>{{filter.adi}} {{filter.tcknNo}} {{filter.yabanciVergiNumarasi}} {{filter.vergiNumarasi}}</li>
              </template>
            </p-autoComplete>
          </div>
          <div class="ui-grid-col-1">
            <label class="firma-label"> Kimlik Tipi</label>
          </div>
          <div class="ui-grid-col-2">
            <p-radioButton name="group1" value="gercek" label="Gerçek" [selected]="true" [(ngModel)]="kimlikTipi"
                           (click)="changeKimlikTipi(kimlikTipi)"
                           formControlName="kimlikTipiFormControl"></p-radioButton>
            <p-radioButton name="group1" value="tuzel" label="Tüzel" [(ngModel)]="kimlikTipi"
                           (click)="changeKimlikTipi(kimlikTipi)"
                           formControlName="kimlikTipiFormControl"></p-radioButton>
            <p-radioButton name="group1" value="yabanci" label="Yabancı" [(ngModel)]="kimlikTipi"
                           (click)="changeKimlikTipi(kimlikTipi)"
                           formControlName="kimlikTipiFormControl"></p-radioButton>
          </div>
          <div class="ui-grid-col-1" *ngIf="kimlikTipi=='gercek'">
            <label class="firma-label">T.C. No: </label>
          </div>
          <div class="ui-grid-col-2" *ngIf="kimlikTipi=='gercek'">
            <input id="tcknNo" type="text" maxlength="11" minlength="11" pInputText placeholder="T.C Numarası Giriniz"
                   [(ngModel)]="firmaDto.tcknNo" onkeypress='return event.charCode >= 48 && event.charCode <= 57'
                   formControlName="tcknoFormControl"/>
            <div class="validation-alert validation-error"
                 *ngIf="firmaGenelForm.controls['tcknoFormControl'].hasError('required') && submitted">
              T.C Alanı Boş Bırakılamaz
            </div>
            <div class="validation-alert validation-error"
                 *ngIf="firmaGenelForm.controls['tcknoFormControl'].hasError('minlength') && submitted">
              Lütfen Eksik Karakter Girmeyiniz
            </div>
            <div class="validation-alert validation-error"
                 *ngIf="firmaGenelForm.controls['tcknoFormControl'].hasError('invalidTcknNo') && submitted">
              Lütfen Geçerli Değer Giriniz
            </div>
          </div>

          <div class="ui-grid-col-1" *ngIf="kimlikTipi=='gercek'|| kimlikTipi=='tuzel'">
            <label class="firma-label">Vergi No:</label>
          </div>
          <div class="ui-grid-col-2" *ngIf="kimlikTipi=='gercek'|| kimlikTipi=='tuzel'">
            <input id="vkNo" type="text" maxlength="10" minlength="10" pInputText placeholder="Vergi No Giriniz"
                   [(ngModel)]="firmaDto.vergiNumarasi" onkeypress='return event.charCode >= 48 && event.charCode <= 57'
                   formControlName="vergiNumarasiFormControl"/>
          </div>
          <div class="ui-grid-col-1" *ngIf="kimlikTipi=='yabanci'">
            <label class="firma-label">Ybn. Vergi No:</label>
          </div>
          <div class="ui-grid-col-2" *ngIf="kimlikTipi=='yabanci'">
            <input id="yabanciVkNo" type="text" size="30" pInputText placeholder="Yabancı Vergi No Giriniz"
                   [(ngModel)]="firmaDto.yabanciVergiNumarasi"
                   formControlName="yabanciVergiNumarasiFormControl"/>
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-1" *ngIf="kimlikTipi=='gercek'">
            <label class="firma-label">Şahıs Adı</label>
          </div>
          <div class="ui-grid-col-2" *ngIf="kimlikTipi=='gercek'">
            <input id="sahisAdiInput" type="text" size="30" pInputText placeholder="Firma Adı Giriniz"
                   [(ngModel)]="firmaDto.sahisAdi" formControlName="sahisAdiFormControl"/>
            <div class="validation-alert validation-error"
                 *ngIf="firmaGenelForm.controls['sahisAdiFormControl'].hasError('required') && submitted">
              Şahıs Adı Boş Bırakılamaz
            </div>
          </div>
          <div class="ui-grid-col-1" *ngIf="kimlikTipi!='gercek'">
            <label class="firma-label">Firma Adı</label>
          </div>
          <div class="ui-grid-col-2" *ngIf="kimlikTipi!='gercek'">
            <input id="FirmaAdiInput" type="text" pInputText placeholder="Firma Adı Giriniz"
                   [(ngModel)]="firmaDto.adi" formControlName="firmaAdiFormControl"/>
            <div class="validation-alert validation-error"
                 *ngIf="firmaGenelForm.controls['firmaAdiFormControl'].hasError('required') && submitted">
              Firma Adı Boş Bırakılamaz
            </div>

          </div>
          <div class="ui-grid-col-1" *ngIf="kimlikTipi=='gercek'">
            <label class="firma-label">Şahıs Soyadı</label>
          </div>
          <div class="ui-grid-col-2" *ngIf="kimlikTipi=='gercek'">
            <input id="sahisSoyadiInput" type="text" pInputText placeholder="Soyadı Giriniz"
                   [(ngModel)]="firmaDto.sahisSoyadi"
                   formControlName="sahisSoyadiFormControl"/>
            <div class="validation-alert validation-error"
                 *ngIf="firmaGenelForm.controls['sahisSoyadiFormControl'].hasError('required') && submitted">
              Şahıs Soyadı Boş Bırakılamaz.
            </div>

          </div>
          <div class="ui-grid-col-1" *ngIf="kimlikTipi=='gercek'">
            <label class="firma-label">Firma Adı </label>
          </div>
          <div class="ui-grid-col-2" *ngIf="kimlikTipi=='gercek'">
            <label class="firma-label">{{firmaDto.sahisAdi}} {{firmaDto.sahisSoyadi}}</label>
          </div>
          <div class="ui-grid-col-1">
            <label class="firma-label">Unvan</label>
          </div>
          <div class="ui-grid-col-2">
            <input id="unvan" type="text" pInputText placeholder="Unvan Giriniz"
                   [(ngModel)]="firmaDto.unvan"
                   formControlName="unvanFormControl"/>
            <div class="validation-alert validation-error"
                 *ngIf="firmaGenelForm.controls['unvanFormControl'].hasError('required') && submitted">
              Unvan Boş Bırakılamaz.
            </div>
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-1">
            <label class="firma-label">Firma Tipi </label>
          </div>
          <div class="ui-grid-col-11">
            <p-multiSelect [options]="musteriTipiList" class="ng-invalid"
                           [(ngModel)]="firmaDto.firmaTipiIdList"
                           [formControl]="firmaGenelForm.controls['musteriTipiListFormControl']"
                           (onChange)="musteriValidation(firmaDto.firmaTipiIdList)"></p-multiSelect>

            <div class="validation-alert validation-error"
                 *ngIf="firmaGenelForm.controls['musteriTipiListFormControl'].hasError('required') && submitted">
              Firma Tipi Boş Bırakılamaz
            </div>

          </div>
        </div>
      </div>
    </p-panel>
    <p-panel [style]="{'margin-bottom':'5px'}">
      <header>
        <span class="ui-panel-title "
              style="font-size:14px;display:inline-block;margin-top:2px">Firma Analiz Bilgileri</span>
        <button pButton type="button"
                style="float: right;width:15%;color:#5cb85c;background-color:transparent;border-color: #5cb85c;font-size:12px"
                (click)="addilgiliKisi()" icon="fa-plus"
                iconPos="right" label="Ilgili Kişi Ekle"></button>
      </header>
      <div class="ui-grid ui-grid-responsive ui-fluid ui-grid-pad">
        <div class="ui-grid-row">
          <div class="ui-grid-col-1">
            <label class="firma-label">Açılış Tarihi</label>
          </div>
          <div class="ui-grid-col-2">
            <p-inputMask mask="9999-99-99" [(ngModel)]="firmaDto.acilisTarihi" placeholder="1900/01/01"
                         [formControl]="firmaGenelForm.controls['firmaAcilisTarihiFormControl']"></p-inputMask>
          </div>
          <div class="ui-grid-col-1">
            <label class="firma-label">Sektor Tipi</label>
          </div>
          <div class="ui-grid-col-2">
            <p-dropdown [options]="sektorList" [(ngModel)]="firmaDto.sektorId" [autoWidth]="true"
                        [style]="{'width':'100%'}" filter="filter"
                        [formControl]="firmaGenelForm.controls['sektorFormControl']"></p-dropdown>
            <div class="validation-alert validation-error"
                 *ngIf="firmaGenelForm.controls['sektorFormControl'].hasError('required') && submitted">
              Lütfen Sektör Tipini Seçiniz.
            </div>
          </div>
          <div class="ui-grid-col-1">
            <label class="firma-label">Finans Kodu</label>
          </div>
          <div class="ui-grid-col-2">
            <p-dropdown [options]="finansKoduList" [(ngModel)]="firmaDto.finansKoduId" [autoWidth]="true"
                        [style]="{'width':'100%'}" filter="filter"
                        [formControl]="firmaGenelForm.controls['finansKoduFormControl']"></p-dropdown>
            <div class="validation-alert validation-error"
                 *ngIf="firmaGenelForm.controls['finansKoduFormControl'].hasError('required') && submitted ">
              Lütfen Finans Tipini Seçiniz
            </div>
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-1">
            <label class="firma-label"> Müşteri Temsilcisi </label>
          </div>
          <div class="ui-grid-col-2">
            <p-dropdown [options]="cities" [style]="{'width':'100%'}" [autoWidth]="true"
                        [(ngModel)]="firmaDto.defaultTelefonNumarasiAdresMetni" filter="filter"
                        [formControl]="firmaGenelForm.controls['musteriTemsilcisiFormControl']"></p-dropdown>
          </div>
          <div class="ui-grid-col-1">
            <label class="firma-label"> Grup Firma </label>
          </div>
          <div class="ui-grid-col-2">
            <p-dropdown [options]="grupFirmaKoduList" [(ngModel)]="firmaDto.grupFirmaId" [autoWidth]="true"
                        [style]="{'width':'100%'}" filter="filter"
                        [formControl]="firmaGenelForm.controls['grupFirmaFormControl']"></p-dropdown>
            <div class="validation-alert validation-error"
                 *ngIf="firmaGenelForm.controls['grupFirmaFormControl'].hasError('required') && submitted">
              Lütfen Grup Firma Seçiniz
            </div>
          </div>
          <div class="ui-grid-col-1">
            <label class="firma-label"> Taraf Kodu </label>
          </div>
          <div class="ui-grid-col-2">
            <p-dropdown [options]="tarafKoduList" [(ngModel)]="firmaDto.tarafKoduId"
                        [style]="{'width':'100%'}" filter="filter"
                        [formControl]="firmaGenelForm.controls['tarafKoduFormControl']"></p-dropdown>
            <div class="validation-alert validation-error"
                 *ngIf="firmaGenelForm.controls['tarafKoduFormControl'].hasError('required') && submitted ">
              Lütfen Taraf Kodu Seçiniz
            </div>
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-1">
            <label class="firma-label"> Riskli Müşteri </label>
          </div>
          <div class="ui-grid-col-2">
            <div class="ui-g-12">
              <p-checkbox [(ngModel)]="firmaDto.riskliMusteriMi" label="Evet" binary="false"
                          name="riskliMusteriMi"
                          [formControl]="firmaGenelForm.controls['riskliMüsteriFormControl']"></p-checkbox>
            </div>
          </div>
          <div class="ui-grid-col-1">
            <label class="firma-label">e-Fatura Müşterisi </label>
          </div>
          <div class="ui-grid-col-2">
            <div class="ui-g-12">
              <p-checkbox name="eFaturaMusterisiMi" [(ngModel)]="firmaDto.eFaturaMusterisiMi" label="Evet"
                          binary="false"
                          [formControl]="firmaGenelForm.controls['eFaturaMusteriFormControl']"></p-checkbox>
            </div>
          </div>
          <div class="ui-grid-col-1" *ngIf="firmaDto.eFaturaMusterisiMi">
            <label class="firma-label">e-Fatura Tarihi</label>
          </div>
          <div class="ui-grid-col-2" *ngIf="firmaDto.eFaturaMusterisiMi">
            <p-inputMask mask="9999-99-99" [(ngModel)]="firmaDto.eFaturaTarihi" placeholder="1900/01/01"
                         slotChar="mm/dd/yyyy"
                         [formControl]="firmaGenelForm.controls['eFaturaTarihiFormControl']"></p-inputMask>
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-1">
            <label class="firma-label">Firma Kapalı</label>
          </div>
          <div class="ui-grid-col-2">
            <div class="ui-g-12">
              <p-checkbox [(ngModel)]="firmaDto.firmaKapaliMi" label="Evet" binary="false"
                          name="firmaKapaliMi"
                          [formControl]="firmaGenelForm.controls['firmaKapaliMiFormControl']"></p-checkbox>
            </div>
          </div>

          <div class="ui-grid-col-1">
            <label class="firma-label"> e-Arşiv </label>
          </div>
          <div class="ui-grid-col-2">
            <div class="ui-g-12">
              <p-checkbox [(ngModel)]="firmaDto.eArsivMi" label="Evet" binary="false" name="eArsivmİ"
                          [formControl]="firmaGenelForm.controls['eArsivMiFormControl']"></p-checkbox>

            </div>
          </div>
          <div class="ui-grid-col-1" *ngIf="firmaDto.eArsivMi">
            <label class="firma-label"> e-Arşiv Posta Adresi</label>
          </div>
          <div class="ui-grid-col-2" *ngIf="firmaDto.eArsivMi">
            <div class="ui-g-12">
              <input id="eArşivPostaAdresi" type="text" size="30" pInputText placeholder="Email Giriniz"
                     [(ngModel)]="firmaDto.eArsivMailAdresi"
                     [formControl]="firmaGenelForm.controls['eArşivPostaAdresiFormControl']"/>
            </div>
          </div>
        </div>
      </div>
      <p-accordion *ngFor="let firmaIlgiliKisi of firmaIlgiliKisiList">
        <firma-ilgili-kisi [firmaIlgiliKisi]="firmaIlgiliKisi"
                           (firmaIlgiliKisiSil)="firmaIlgiliKisiListedenSil($event)"></firma-ilgili-kisi>
      </p-accordion>
    </p-panel>

  </form>

Answer 1

ngForm指令自动注册所有使用ngModel和name属性的子控件。 例如：

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
  <input name="first" ngModel>
  <input name="last" ngModel>
  <button>Submit</button>
</form>