Hirdetés

Keresés

Új hozzászólás Aktív témák

  • petyus_
    senior tag

    Bekérdezek ide, hátha valaki találkozott hasonlóval

    Angular 9

    Reactive formot használok, meg materialt

    Használok egy pár beépített validátort, meg egy sajátot a jelszóra

    A gond ott van, hogy minden hibát egyszer ír ki, tehát először csak a required-re lő, aztán ha van benne valami, akkor kiírja, hogy rövid a jelszó stb, de ha használom a saját validátoromat , ami azt nézi, hogy van e benne nagybetű, akkor kiírja a hibát akkor is, amikor üres a beviteli mező, és akkor 2 hibát ír ki a required-re, meg a saját validációmra

    Ezt nem tudom, hogyan kellene megoldani, azt próbáltam már, hogy a custom validatorba megvizsgálom, hogy van e benne hiba, és a hibák között nincs az, amire éppen létrahoztam a custom validatort, de ígyis ugyan ezt csinálta

    Legrosszabb esetben használok pattern-t, de azért szebb lenne emígy megoldani

    Ha mutatsz kódot, kicsit könnyebb lenne. Írtad, hogy Materialt használsz, ott ha több hibaüzenet is van, akkor neked kell kezelned, hogy melyik mikor jelenjen meg, alapból csak annyit néz, hogy dirty || touched, és ha van hiba, akkor megjeleníti (ha több hiba van, akkor mindet). Neked megírnod mindegyik hibára, hogy melyik mikor jelenjen meg.

    Illetve, ha már dirty || touched, és ezért mutatja a required hibát, akkor egyértelmű, hogy mutatja a "nincs e betű" hibát, mert ha üres, akkor nincs e betű :) .

    Nekem pl van egy ilyenem:

    <mat-form-field>
    <mat-label>Name</mat-label>
    <input type="text" id="name" formControlName="name" matInput />
    <mat-error *ngIf="accountName.hasError('required')">Account name is required</mat-error>
    <mat-error *ngIf="accountName.hasError('minlength')">Account name must be at least 3 characters</mat-error>
    </mat-form-field>

    Itt a required akkor jelenik meg, ha dirty || touched, a minlength-es pedig akkor, ha 1 vagy 2 karakter van beírva, de ez a gyári minlength, itt megvan írva ez a viselkedés.

  • bandi0000
    nagyúr

    Bekérdezek ide, hátha valaki találkozott hasonlóval

    Angular 9

    Reactive formot használok, meg materialt

    Használok egy pár beépített validátort, meg egy sajátot a jelszóra

    A gond ott van, hogy minden hibát egyszer ír ki, tehát először csak a required-re lő, aztán ha van benne valami, akkor kiírja, hogy rövid a jelszó stb, de ha használom a saját validátoromat , ami azt nézi, hogy van e benne nagybetű, akkor kiírja a hibát akkor is, amikor üres a beviteli mező, és akkor 2 hibát ír ki a required-re, meg a saját validációmra

    Ezt nem tudom, hogyan kellene megoldani, azt próbáltam már, hogy a custom validatorba megvizsgálom, hogy van e benne hiba, és a hibák között nincs az, amire éppen létrahoztam a custom validatort, de ígyis ugyan ezt csinálta

    Legrosszabb esetben használok pattern-t, de azért szebb lenne emígy megoldani

    + egy kis Responsive ötlet is jól jönne

    Szintén Angular material, + Angular Flex-Layout

    Ötlet az az, hogy angularba nyitok egy dialogot a bejelentkezés és regisztrációhoz, viszont úgy szeretném megoldani a kettő közti váltást, hogy a dialogon belül 2 db gomb lenne, egymás mellett, amik egyenként elfoglalják a szélesség 50-50%-át, viszont a legkisebb állapotában minden vezérlő egymás alá kerülne

    Nagyrészt ezek meg is vannak, csak az első fejtörést az okozza, hogy a dialognak kellene egyáltalán adni szélességet? mert ugye elvileg felveszi a tartalomnak a szélességét

    A másik dolog, hogy ahogy összehúzom a böngészőt, a beviteli mezők szépen egymás alá kerülnek, viszont a gombok nem, ez azért lehet mert megadtam nekik, hogy 100% legyen a szélességük, ha viszont ezt kiveszem, akkor meg nem töltik ki a helyet
    (beviteli mezők külön komponensben vannak, azokat alul szúrom be)

    <div fxLayout="column">    
        <div fxLayout="row" fxLayoutAlign="end">        
           <button mat-button (click)="closeDialog()">
    <i class="material-icons">close</i>        
            </button>    
        </div>    
        <div fxLayout="row">        
            <div fxFlex="100">            
                <button mat-button (click)="isLoginActive= true" 
                    [class.btn--disable]="isLoginActive"               
                    class="full-width no-shape">Login</button>            
                <button mat-button (click)="isLoginActive= false" 
                    [class.btn--disable]="!isLoginActive"                
                    class="full-width no-shape">Registration</button>        
    </div>   
        </div>
    </div>
    <div *ngIf="isLoginActive">    
        <app-login></app-login>
    </div>
    <div *ngIf="!isLoginActive">    
        <app-registration></app-registration>
    </div>

Új hozzászólás Aktív témák