Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<div class="ui-s480">
<form #formCliente="ngForm" class="ui-validate on-dirty on-submit" (submit)="onSubmit(formCliente)">
<ui-card class="elevate-on-toolbar" [class.loading]="loading">
<div class="ui-progress accent" [class.hide]="!loading">
<div class="indeterminate"></div>
</div>
<ui-toolbar class="flat">
<button class="ui-button flat icon" type="button" uiRipple (click)="_location.back()">
<i class="material-icons">arrow_back</i>
</button>
<span class="title">{{newRegister ? 'Novo cliente' : (loading ? 'Carregando' : 'Alterando ' + (info.nome || 'cliente'))}}</span>
</ui-toolbar>
<fieldset [disabled]="saving || loading">
<ui-card-content>
<div>
<input type="file" name="input" uiInputFile [(ngModel)]="info.imagemPath" [read]="changeImagem.bind(this)" [error]="changeImagemError.bind(this)"
#inputNovaImagem #fieldNovaImagem="ngModel" accept="jpg,jpeg,png" max-file-size="15MB" hidden>
<div class="picture">
<div *ngIf="!info.imagem && !info.novaImagem" (click)="inputNovaImagem.click()">
<span *ngIf="info.nome">{{info.nome.substring(0, 1)}}</span>
<i *ngIf="!info.nome" class="material-icons">assignment_ind</i>
</div>
<div *ngIf="info.imagem || info.novaImagem" [style.background-image]="'url(' + (info.novaImagem || info.imagem) + ')'"></div>
<button type="button" class="ui-button icon raised accent" uiRipple [uiMenuTrigger]="menuPicture" align="left">
<i class="material-icons">photo_camera</i>
</button>
</div>
</div>
<div class="ui-flex-container">
<ui-input-container>
<input #fieldNome="ngModel" type="text" [(ngModel)]="info.nome" uiInput name="nome" required uiMaxlength="50">
<label>Nome</label>
<div class="ui-messages">
<div *ngIf="fieldNome.errors && fieldNome.dirty">
<div class="ui-message error" [hidden]="!fieldNome.pristine && !fieldNome.errors.required">
Nome é obrigatório
</div>
<div class="ui-message counter error" [hidden]="!fieldNome.errors.uiMaxlength">
{{info.nome ? info.nome.length : 0}}/50
</div>
</div>
</div>
</ui-input-container>
</div>
<div class="ui-flex-container">
<ui-input-container>
<input #fieldCpf="ngModel" id="cpf" type="text" [(ngModel)]="info.cpf" uiInput uiMaskCpf name="cpf" required >
<label>CPF</label>
<div class="ui-messages">
<div *ngIf="fieldCpf.errors && fieldCpf.dirty">
<div class="ui-message error" [hidden]="!fieldCpf.pristine && !fieldCpf.errors.required">
CPF é obrigatório
</div>
<div class="ui-message error"
[hidden]="!fieldCpf.pristine && !fieldCpf.errors.duplicate">
Já exisite um cliente com esse CPF
</div>
</div>
</div>
</ui-input-container>
</div>
<div class="ui-flex-container">
<ui-input-container>
<input #fieldDataNascimento="ngModel" id="dataNascimento" type="text" [(ngModel)]="info.dataNascimento" uiInput uiMaskDate name="dataNascimento" required >
<label>Data de Nascimento</label>
<div class="ui-messages">
<div *ngIf="fieldDataNascimento.errors && fieldDataNascimento.dirty">
<div class="ui-message error" [hidden]="!fieldDataNascimento.pristine && !fieldDataNascimento.errors.required">
Data de nascimento é obrigatório
</div>
</div>
</div>
</ui-input-container>
</div>
<div class="ui-flex-container">
<ui-input-container>
<input #fieldEmail="ngModel" id="email" type="text" [(ngModel)]="info.email" uiInput name="email" required >
<label>E-mail</label>
<div class="ui-messages">
<div *ngIf="fieldEmail.errors && fieldEmail.dirty">
<div class="ui-message error" [hidden]="!fieldEmail.pristine && !fieldEmail.errors.required">
E-mail é obrigatório
</div>
</div>
</div>
</ui-input-container>
</div>
<div class="ui-flex-container">
<ui-input-container>
<input #fieldTelefone="ngModel" id="telefone" type="text" [(ngModel)]="info.telefone" uiInput uiMaskPhone name="telefone" required >
<label>Telefone</label>
<div class="ui-messages">
<div *ngIf="fieldTelefone.errors && fieldTelefone.dirty">
<div class="ui-message error" [hidden]="!fieldTelefone.pristine && !fieldTelefone.errors.required">
Telefone é obrigatório
</div>
</div>
</div>
</ui-input-container>
</div>
</ui-card-content>
</fieldset>
</ui-card>
<div class="ui-fab-container">
<button class="ui-button success fab" uiRipple [class.hide]="loading">
<ui-progress-radial class="indeterminate" *ngIf="saving"></ui-progress-radial>
<i class="material-icons">check</i>
</button>
</div>
</form>
<ui-menu #menuPicture>
<div class="ui-menu-content size-2x">
<div class="ui-menu-item" uiRipple (click)="inputNovaImagem.click()">
<i class="icon material-icons">add_a_photo</i>
{{!info.imagem && !info.novaImagem ? 'Selecionar imagem' : 'Nova imagem'}}
</div>
<div class="ui-menu-item" uiRipple *ngIf="info.imagem || info.novaImagem" (click)="info.novaImagem = null; info.imagem = null; inputNovaImagem.value = ''">
<i class="icon material-icons">delete</i>
Remover
</div>
</div>
</ui-menu>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.