protractor - how to identify element - protractor

In the below page,I have to verify whether "test_tracker" is present or not. I am sure how to do that. can any one help? I thought of gng by ng-repeat but it is giving zero.
element.all(by.repeater("item in
ct.data.pageContentTypes")).count().then(function (count) {
console.log("count value: " + count);
what else approach i can go by?
code snippet:
<div ng-class="detailsChecked ? 'col-sm-8 col-xs-8 col-md-8 col-lg-8' : 'col-sm-12 col-xs-12 col-md-12 col-lg-12'" class="col-sm-12 col-xs-12 col-md-12 col-lg-12">
<!-- ngRepeat: item in ct.data.pageContentTypes -->
<div class="col-sm-3 col-xs-3 col-md-3 col-lg-3 ng-scope" ng-repeat="item in ct.data.pageContentTypes">
<a class="thumbnail" documents-dropzone="" data-category-id="1" ng-click="getContentTypeDetailsByID(item)">
<div ng-class="selectedContentTypeId == '1' ? 'thumbnail-cat thumbnail-cat-public' : 'thumbnail-cat thumbnail-cat-private'" class="thumbnail-cat thumbnail-cat-private">
<span style="word-break:break-all;" class="ng-binding">CORE</span>
</div>
</a>
</div>
<!-- end ngRepeat: item in ct.data.pageContentTypes -->
<div class="col-sm-3 col-xs-3 col-md-3 col-lg-3 ng-scope" ng-repeat="item in ct.data.pageContentTypes">
<a class="thumbnail" documents-dropzone="" data-category-id="72" ng-click="getContentTypeDetailsByID(item)">
<div ng-class="selectedContentTypeId == '72' ? 'thumbnail-cat thumbnail-cat-public' : 'thumbnail-cat thumbnail-cat-private'" class="thumbnail-cat thumbnail-cat-private">
<span style="word-break:break-all;" class="ng-binding">march 13 tt</span>
</div>
</a>
</div>
<!-- end ngRepeat: item in ct.data.pageContentTypes -->
<div class="col-sm-3 col-xs-3 col-md-3 col-lg-3 ng-scope" ng-repeat="item in ct.data.pageContentTypes">
<a class="thumbnail" documents-dropzone="" data-category-id="80" ng-click="getContentTypeDetailsByID(item)">
<div ng-class="selectedContentTypeId == '80' ? 'thumbnail-cat thumbnail-cat-public' : 'thumbnail-cat thumbnail-cat-private'" class="thumbnail-cat thumbnail-cat-private">
<span style="word-break:break-all;" class="ng-binding">NTC NZ MO</span>
</div>
</a>
</div>
<!-- end ngRepeat: item in ct.data.pageContentTypes -->
<div class="col-sm-3 col-xs-3 col-md-3 col-lg-3 ng-scope" ng-repeat="item in ct.data.pageContentTypes">
<a class="thumbnail" documents-dropzone="" data-category-id="87" ng-click="getContentTypeDetailsByID(item)">
<div ng-class="selectedContentTypeId == '87' ? 'thumbnail-cat thumbnail-cat-public' : 'thumbnail-cat thumbnail-cat-private'" class="thumbnail-cat thumbnail-cat-private">
<span style="word-break:break-all;" class="ng-binding">test_tracker</span>
</div>
</a>
</div>
<!-- end ngRepeat: item in ct.data.pageContentTypes -->
<div class="col-sm-3 col-xs-3 col-md-3 col-lg-3 ng-scope" ng-repeat="item in ct.data.pageContentTypes">
<a class="thumbnail" documents-dropzone="" data-category-id="26" ng-click="getContentTypeDetailsByID(item)">
<div ng-class="selectedContentTypeId == '26' ? 'thumbnail-cat thumbnail-cat-public' : 'thumbnail-cat thumbnail-cat-private'" class="thumbnail-cat thumbnail-cat-private">
<span style="word-break:break-all;" class="ng-binding">Tracker Test 0119</span>
</div>
</a>
</div>
<!-- end ngRepeat: item in ct.data.pageContentTypes -->
</div>

finally, below code is working to resolve it
element.all(by.repeater('role in roles.pageitems')).count().then(function (count)
{
console.log("Total number of entries are : " + count)
element.all(by.repeater('role in roles.pageitems')).map(function(elm) {
return elm.getText();
}).then(function(texts) {
console.log("Entries are " + texts);
expect(texts).toContain("" + a + "");
});
});

Try to use Xpath for this,
var track = element(by.xpath(//span[text()='test_tracker']));
track.isPresent().then(function(){
console.log("track is visible");
})

Related

Q-select selected value and select dropdown in Vuejs3 is not displayed correctly

I make an application in vuejs3 and quasar, here i am using q-select but selected option and select arrow is not welle displayed here the display
i have no specific CSS, here my component
<template>
<teleport v-if="show" to="#modals">
<div class="modal" tabindex="-1" role="dialog" style="overflow-y: scroll">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Changer le status de la commande N° {{ orderId }}</h5>
</div>
<form class="status-form" #submit.prevent="onSubmit">
<div class="modal-body">
<Comment :id_order="orderId" />
<!-- <select id="state" v-model="selected">
<option
v-for="state in orderStates"
:value="state.id"
:key="state.id"
>
{{ state.name }}
</option>
</select> -->
<q-select outlined v-model="state" name="state" :options="orderStates" label="state.name" option-value="id"
option-label="name" fill-input use-input/>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">
<slot name="loading" v-if="loadingState">Loading...</slot>
<slot name="loading" v-if="!loadingState"
>Changer le status</slot
>
</button>
<button
type="button"
class="btn btn-secondary"
#click="
$emit('update:show', !show),
$emit('update:orderDetails', []),
$emit('update:orderId', null),
$emit('update:selected', null)
"
>
Fermer
</button>
</div>
</form>
</div>
</div>
</div>
any idea ?

Binding.scala - SBT Out Of Memory issues

I have a large #html function (125 lines) and after that sbt fails with OutOfMemory. I increased sbt's memory to 8g and same thing so it's not just it needed a little more memory.
Is this a known issue with Binding.scala?
sbt 1.3.2
scala 2.13.3
JDK11
scala js 1.1.1
"org.lrng.binding" %%% "html" % "1.0.3"
"com.thoughtworks.binding" %%% "binding" % "12.0.0"
#html def topNav: NodeBinding[Node] = {
<nav class="navbar navbar-light navbar-expand bg-white shadow mb-4 topbar static-top">
<div class="container-fluid">
<button class="btn btn-link d-md-none rounded-circle mr-3" id="sidebarToggleTop" type="button"><i class="fas fa-bars"></i></button>
<form class="form-inline d-none d-sm-inline-block mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input class="bg-light form-control border-0 small" type="text" placeholder="Search for ..."/>
<div class="input-group-append"><button class="btn btn-primary py-0" type="button"><i class="fas fa-search"></i></button></div>
</div>
</form>
<ul class="nav navbar-nav flex-nowrap ml-auto">
<li class="nav-item dropdown d-sm-none no-arrow">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><i class="fas fa-search"></i></a>
<div class="dropdown-menu dropdown-menu-right p-3 animated--grow-in" role="menu" aria-labelledby="searchDropdown">
<form class="form-inline mr-auto navbar-search w-100">
<div class="input-group">
<input class="bg-light form-control border-0 small" type="text" placeholder="Search for ..."/>
<div class="input-group-append"><button class="btn btn-primary py-0" type="button"><i class="fas fa-search"></i></button></div>
</div>
</form>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1" data:role="presentation">
<li class="nav-item dropdown no-arrow">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><span class="badge badge-danger badge-counter">3+</span><i class="fas fa-bell fa-fw"></i></a>
<div class="dropdown-menu dropdown-menu-right dropdown-list dropdown-menu-right animated--grow-in"
role="menu">
<h6 class="dropdown-header">alerts center</h6>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="mr-3">
<div class="bg-primary icon-circle"><i class="fas fa-file-alt text-white"></i></div>
</div>
<div>
<span class="small text-gray-500">December 12, 2019</span>
<p>A new monthly report is ready to download!</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="mr-3">
<div class="bg-success icon-circle"><i class="fas fa-donate text-white"></i></div>
</div>
<div>
<span class="small text-gray-500">December 7, 2019</span>
<p>$290.29 has been deposited into your account!</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="mr-3">
<div class="bg-warning icon-circle"><i class="fas fa-exclamation-triangle text-white"></i></div>
</div>
<div>
<span class="small text-gray-500">December 2, 2019</span>
<p>Spending Alert: We've noticed unusually high spending for your account.</p>
</div>
</a>
<a class="text-center dropdown-item small text-gray-500" href="#">Show All Alerts</a>
</div>
</li>
</li>
<li class="nav-item dropdown no-arrow mx-1" data:role="presentation">
<li class="nav-item dropdown no-arrow">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><i class="fas fa-envelope fa-fw"></i><span class="badge badge-danger badge-counter">7</span></a>
<div class="dropdown-menu dropdown-menu-right dropdown-list dropdown-menu-right animated--grow-in"
role="menu">
<h6 class="dropdown-header">alerts center</h6>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="assets/img/avatars/avatar4.jpeg"/>
<div class="bg-success status-indicator"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate"><span>Hi there! I am wondering if you can help me with a problem I've been having.</span></div>
<p class="small text-gray-500 mb-0">Emily Fowler - 58m</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="assets/img/avatars/avatar2.jpeg"/>
<div class="status-indicator"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate"><span>I have the photos that you ordered last month!</span></div>
<p class="small text-gray-500 mb-0">Jae Chun - 1d</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="assets/img/avatars/avatar3.jpeg"/>
<div class="bg-warning status-indicator"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate"><span>Last month's report looks great, I am very happy with the progress so far, keep up the good work!</span></div>
<p class="small text-gray-500 mb-0">Morgan Alvarez - 2d</p>
</div>
</a>
<a class="d-flex align-items-center dropdown-item" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="assets/img/avatars/avatar5.jpeg"/>
<div class="bg-success status-indicator"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate"><span>Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...</span></div>
<p class="small text-gray-500 mb-0">Chicken the Dog · 2w</p>
</div>
</a>
<a class="text-center dropdown-item small text-gray-500" href="#">Show All Alerts</a>
</div>
</li>
<div class="shadow dropdown-list dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown"></div>
</li>
<div class="d-none d-sm-block topbar-divider"></div>
<li class="nav-item dropdown no-arrow" data:role="presentation">
<li class="nav-item dropdown no-arrow">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><span class="d-none d-lg-inline mr-2 text-gray-600 small">Valerie Luna</span><img class="border rounded-circle img-profile" src="assets/img/avatars/avatar1.jpeg"/></a>
<div
class="dropdown-menu shadow dropdown-menu-right animated--grow-in" role="menu">
<a class="dropdown-item" data:role="presentation" href="#"><i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Profile</a><a class="dropdown-item" data:role="presentation" href="#"><i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i> Settings</a>
<a
class="dropdown-item" data:role="presentation" href="#"><i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i> Activity log</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data:role="presentation" href="#"><i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout</a>
</div>
</li>
</li>
</ul>
</div>
</nav>
}

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

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>
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>

TYPO3 FLUID grouping and limiting elements while looping

I'm trying to make FLuID loop which will display block with the 4 pictures. I would like to achieve something like this:
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://image1.jpg"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://image2.jpg"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://image3.jpg"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://image4.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://image5.jpg"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://image6.jpg"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://image7.jpg"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://image8.jpg"></div>
</div>
</div>
The problem is that I'm newbie in FLUID stuff and don't know how to make loop with only 4 elements. My FLUID loop looks like that:
<div class="carousel-inner">
<f:for each="{paginatedAssets}" as="mediaAsset" iteration="iterator">
<f:if condition="{iterator.index} = 4">
<div class="item{f:if(condition: '{iterator.index} == 0', then: ' active')}">
<div data-target="#carousel" data-slide-to="{iterator.index}" class="thumb">
<f:render partial="MediaAsset/Detail" section="Detail" arguments="{alt:mediaAsset.alternative,title:mediaAsset.title,mediaAsset:mediaAsset,width:settings.album.thumb.width,height:settings.album.thumb.height,resizeMode:settings.album.thumb.resizeMode}" />
</div>
</div>
</f:if>
</f:for>
</div>
But it display something like that:
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb">
<img title="Photo 1" alt="Photo 1" src="fileadmin/_processed_/csm_P1320323_f0d26808a1.jpg" width="800" height="600" />
</div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="1" class="thumb">
<img title="Photo 2" alt="Photo 2" src="fileadmin/_processed_/csm_P1320326_d00a6dfa33.jpg" width="800" height="600" />
</div>
</div>
...
<div class="item">
<div data-target="#carousel" data-slide-to="n" class="thumb">
<img title="Photo n" alt="Photo n" src="fileadmin/_processed_/csm_P1234567_f001234567.jpg" width="800" height="600" />
</div>
</div>
</div>
So every loop display only one (not 4) images. Any suggestions?
I will be grateful for any help.
You can use the isFirst, isLast and cycle properties of the iterator to achieve this:
<f:for each="{paginatedAssets}" as="mediaAsset" iteration="iterator">
<f:if condition="{iterator.isFirst}">
<div class="item active">
</f:if>
<div data-target="#carousel" data-slide-to="{iterator.index}" class="thumb">
<f:render partial ... />
</div>
<f:if condition="{iterator.cycle} % 4">
<f:else>
</div>
<div class="item">
</f:else>
</f:if>
<f:if condition="{iterator.isLast}">
</div>
</f:if>
</f:for>

HTML2Canvas unable convert div to image with large images

I am using HTML2CANVAS to capture Div as Image and save to database.
Its working fine with images of 1-2 kb and text.
but unable to capture multiple and large images suppose 200-300 kb.
Please help help me out if anyone has face this issue and has solution.
Here is my Code:
<div id="target">
<page size="A4">
<div id="wrapper" >
<div id="header">
<div class="text">
<span id="rent">This Space for rent/price</span>
<h1 id="propAdd">THIS SPACE FOR PROPERTY ADDRESS</h1>
<h1 id="Data">THIS SPACE FOR DATA</h1>
</div>
</div>
<h1 id="ad">
This Space For advert heading</h1>
<div id="content">
<div class="main">
<div id="dvPreview2">
<img src="images/main-image.jpg" width="550" height="355" />
</div>
<h1 id="DES">This Space for Property Description or FEATURES</h1>
<ul>
<li id="DES1">4 Bedrooms, 3 Bathrooms</li>
<li id="DES2">Ensuite has double shower & double vanity</li>
<li id="DES3">Massive open plan living with cathedral ceilings</li>
<li id="DES4">Resort-style pool deck area</li>
<li id="DES5">Gourmet kitchen with butlers pantry</li>
<li id="DES6">Fully ducted air-con</li>
<li id="DES7">Triple lock-up garage with remote</li>
<li id="DES8">Outside pets considered on application</li>
</ul>
</div>
<div class="sidebar">
<div id="dvPreview3">
<img src="images/sidebar-image-01.png" width="159" height="100" />
</div>
<div id="dvPreview4">
<img src="images/sidebar-image-02.png" width="159" height="100" />
</div>
<div id="dvPreview5">
<img src="images/sidebar-image-03.png" width="159" height="100" />
</div>
<p id="dvPreview1" >
<img src="images/agent-logo.png" style="width:80px;" /></p>
<p style="margin-top:0 !important;">
Phone: <span id="phone">+49 30 47373795</span><br />
E-mail: <span id="mail">Ject41#cuvox.de</span><br />
<span id="web">www.abc.in</span>
</p>
</div>
<div class="clear"></div>
<div class="slid-img">
<div id="dvPreview6" >
<img src="images/image-01.jpg" width="159" height="100" />
</div>
<div id="dvPreview7" >
<img src="images/image-02.jpg" width="159" height="100" />
</div>
<div id="dvPreview8" >
<img src="images/main-image.jpg" width="159" height="100" />
</div>
<div id="dvPreview9" >
<img src="images/sidebar-image-01.png" width="159" height="100" style="float:right; margin:0" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="affiliation-logo">
<ul>
<li><div id="dvPreview10" style="width:32px;"><img src="images/facebook-icon.png" width="32" /></div></li>
<li><div id="dvPreview11" style="width:32px;"><img src="images/twitter-icon.png" width="32" /></div></li>
<li><div id="dvPreview12" style="width:32px;"><img src="images/linkedin-icon.png" width="32" /></div></li>
<li><div id="dvPreview13" style="width:32px;"><img src="images/youtube-icon.png" width="32" /></div></li>
<li><div id="dvPreview14" style="width:32px;"><img src="images/google-plus-icon.png" width="32" /></div></li>
</ul>
</div>
<div class="clear"></div>
<div id="footer">
<div class="agent-section">
<%-- <div class="agent-name"></div>--%>
<span class="agent-name" style="float:left"> Disclaimer : </span>
<div id="DIS" style="max-width:550px; float:left; margin-left:10px; line-height:18px; font-size:14px;"></div>
</div>
<div class="clear"></div>
</div>
</div>
</page>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#add_button').click(function () {
html2canvas($('#target'), {
onrendered: function (canvas) {
var img = canvas.toDataURL()
img = img.replace('data:image/png;base64,', '');
//alert(img);
//window.open(img);
$.ajax({
type: 'POST',
url: 'Design1.aspx/UploadImage',
data: '{ "imageData" : "' + img + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
//alert('Image saved successfully !');
}
});
}
});
});
});
</script>
In file Html2Canvas.js on line 65
Change following line from
/* Highest positive signed 32-bit float value /
/maxInt = 2147483647, // aka. 0x7FFFFFFF or 2^31-1
to as Below
maxInt = Number.MAX_VALUE,
trick.
set your tag with and height is double of the output image size.