Mon forum PunBB

Malheureusement personne ne peut vous dire ce que PunBB est - vous devez le voir par vous-même.

Vous n'êtes pas identifié.

#1 23-01-2019 15:09:03

willy
Administrateur
Date d'inscription: 13-02-2016
Messages: 8

reactive form html

Code:

<ng-template #popContent>
    <div>
        <form [formGroup]="loginForm" (ngSubmit)="onSubmit(p)">
        <!--  -->
            <div class="form-group">
              <label class="control-label" for="email">Email:</label>
              <input type="text" formControlName="email" class="form-control" placeholder="user.name@dom.com"
              [ngClass]="{ 'is-invalid': f.email.invalid && (submitted || f.email.touched) }" autocomplete="on"/>
                   <div class="form-text error-form" 
                   [ngClass]="{ 'invalid-feedback': f.email.invalid && (submitted || f.email.touched) }">
                       <div class="invalid-form-alert" *ngIf="f.email.errors && f.email.errors.required" >
                           Email is required
                       </div>
                <div class="invalid-form-alert" *ngIf="f.email.errors && f.email.errors.email">
                    Email must be a valid email address
                </div>
                 </div>
            </div>
            
            <div class="form-group">
              <label class="control-label" for="Password">Password:</label>
              <input type="password" formControlName="password" class="form-control" placeholder="minimum 8 caractères"
               [ngClass]="{ 'is-invalid': f.password.invalid && (submitted || f.password.touched) }" />
                <div class="form-text error-form"
                [ngClass]="{ 'invalid-feedback': f.password.invalid && (submitted || f.password.touched) }" >
                    <div class="invalid-form-alert" 
                    *ngIf="f.password.errors && f.password.errors.required">
                        Password is required
                  </div>
                  <div class="invalid-form-alert" 
                  *ngIf="f.password.errors && f.password.errors.minlength">
                      Password must be at least 8 characters
                  </div>
                </div>
            </div>
       
            <div class="form-group">
              <label class="control-label" for="confirmPassword">Confirm Password:</label>
              <input type="password" formControlName="confirmPassword" class="form-control" placeholder="confirmer le mot de passe"
               [ngClass]="{ 'is-invalid': f.confirmPassword.invalid && (submitted || f.confirmPassword.touched) }" />
                <div class="form-text error-form"
                [ngClass]="{ 'invalid-feedback': f.confirmPassword.invalid && (submitted || f.confirmPassword.touched) }">
                   <div class="invalid-form-alert" *ngIf="f.confirmPassword.errors && f.confirmPassword.errors.required">
                    Confirm Password is required
                   </div>
                   <div class="invalid-form-alert" *ngIf="f.confirmPassword.errors && f.confirmPassword.errors.match">
                        Passwords must match
                   </div>
                </div>
            </div>
            <br>
            <div class="form-group text-right">
                <button type="submit" class="btn btn-outline-primary mr-2" >
                    Connexion
                </button>
            </div>
          </form>
  
    </div>
</ng-template>
<ng-template #popTitle><b>Connexion</b></ng-template>
<a class="nav-link" href="#" [ngbPopover]="popContent" [popoverTitle]="popTitle" placement="bottom-right"
[autoClose]="false" #p="ngbPopover" (click)="resetForm(p)" triggers="manual" popoverClass="my-popover">
  Connexion
</a>

Hors ligne

 

#2 23-01-2019 15:10:15

willy
Administrateur
Date d'inscription: 13-02-2016
Messages: 8

Re: reactive form html

Code:

.my-popover {
    max-width: none !important;
    width: 350px;
    /* margin-right: 10px;*/
}

.my-popover .arrow::after {
    border-bottom-color: #007bff;
}

.my-popover .popover-header {
    text-align: center;
    background-color: #007bff;
}

.error-form {
    height: 0.6em;
    font-size: 80%;
}

élément {
}

.invalid-form-alert {
    display: none;
}

.form-text.invalid-feedback > .invalid-form-alert {
    display: block;
}

Hors ligne

 

Pied de page des forums

Propulsé par PunBB
© Copyright 2002–2005 Rickard Andersson
Traduction par punbb.fr