<div class="container main-container">
    <h4>Demo Cadastro</h4>
    <hr />
    <form novalidate (ngSubmit)="adicionarUsuario()" [formGroup]="cadastroForm">
        <div class="form-horizontal">

            <div class="form-group">
                <label class="col-md-2 control-label" for="nome">Nome Completo</label>
                <div class="col-md-10">
                    <input class="form-control" id="nome" type="text" placeholder="Nome (requerido)" formControlName="nome" [ngClass]="{'is-invalid': displayMessage.nome }" />
                    <span class="text-danger" *ngIf="displayMessage.nome">
                        <p [innerHTML]="displayMessage.nome"></p>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">CPF</label>
                <div class="col-md-10">
                    <input class="form-control" id="cpf" type="text" placeholder="CPF (requerido)" formControlName="cpf" cpf [textMask]="{mask: MASKS.cpf.textMask}" [ngClass]="{'is-invalid': displayMessage.cpf }" />

                    <span class="text-danger" *ngIf="displayMessage.cpf">
                        <p [innerHTML]="displayMessage.cpf"></p>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">E-mail</label>
                <div class="col-md-10">
                    <input class="form-control" id="email" type="text" placeholder="E-mail (requerido)" formControlName="email" [ngClass]="{'is-invalid': displayMessage.email }" />
                    <span class="text-danger" *ngIf="displayMessage.email">
                        <p [innerHTML]="displayMessage.email"></p>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">Senha</label>
                <div class="col-md-10">
                    <input class="form-control" id="senha" type="password" placeholder="Senha (requerido)" formControlName="senha" [ngClass]="{'is-invalid': displayMessage.senha }" />
                    <span class="text-danger" *ngIf="displayMessage.senha">
                        <p [innerHTML]="displayMessage.senha"></p>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label">Confirme a Senha</label>
                <div class="col-md-10">
                    <input class="form-control" id="senhaConfirmacao" type="password" placeholder="Confirme a Senha (requerido)" formControlName="senhaConfirmacao" [ngClass]="{'is-invalid': displayMessage.senhaConfirmacao }" />
                    <span class="text-danger" *ngIf="displayMessage.senhaConfirmacao">
                        <p [innerHTML]="displayMessage.senhaConfirmacao"></p>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-md-offset-2">
                    <span><button class="btn btn-success" id="Registrar" [disabled]="!cadastroForm.valid" type="submit">Registrar</button></span>
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-4 col-md-offset-2">
                    <p>Formulario valido: {{ cadastroForm.valid }}</p>
                    <p>Formulario Tocado: {{ cadastroForm.touched }}</p>
                    <p>Formulario Sujo: {{ cadastroForm.dirty }}</p><br>
                    <p>Formulario: {{ formResult }}</p>
                </div>
            </div>
        </div>
    </form>
</div>