Do we have to define each element as FormControl in Angular2 Reactive Form? - forms

Question

i have too much input element and form. I would like to use reactive form in angular2 but i don't want to define each element as formcontrol. I need to apply only where necessary like required and custom validation. Is it possible? Thank you all answer.
I am using like this right now;
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

The ngForm directive automatically registers all child controls that use ngModel with a name attribute.
For example:
<form #f="ngForm" (ngSubmit)="onSubmit(f)">
<input name="first" ngModel>
<input name="last" ngModel>
<button>Submit</button>
</form>