javascript - Tresporsbryter i Angular

I min Angular 6-applikasjon har jeg behov for å bruke en tre-stats vekslebryter som har rekkefølgen,

---ON---NA---OFF---

Som jeg har brukt følgende Html til,

<div class="switch-toggle switch-3 switch-candy">
   <input id="on" name="state-d" type="radio" checked="">
   <label for="on" onclick="">ON</label>

   <input id="na" name="state-d" type="radio" checked="checked">
   <label for="na" onclick="">N/A</label>

   <input id="off" name="state-d" type="radio">
   <label for="off" onclick="">OFF</label>

   <a></a>
</div>

Kunne ikke dele css-filen fordi den har mange koder..

Arbeidende eksempel: https://stackblitz.com/edit/angular-6-template-driven-form-validation-z2rsig

Der du kunne se to ganger laget bryterbokser hvor den første er helt hardkodede radioknapper..

Men i det andre prøver jeg å gjøre det dynamisk, men jeg klarer ikke å få den samme UI-en og verdien til den valgte bryteren.

Tingen jeg har behov for er, jeg trenger å lage en tre-tilstands bryter som vil ha verdiene På --- NA --- Av. Hvis brukeren bytter til Av så må verdien av state-d være Av, og hvis det er På så må verdien av state-d være På, og tilsvarende for NA. Som standard må NA være valgt (huket av).

Jeg trenger et resultat som ligner på det første i lenken https://stackblitz.com/edit/angular-6-template-driven-form-validation-z2rsig

Men radioknappene må være dynamiske, slik som jeg prøvde i den andre på samme lenke.. (Det fungerer ikke).

Html:

<div *ngFor="let option of options" class="switch-toggle switch-3 switch-candy">
        <div class="radio">
            <input type="radio"
               name="state-d"
               id="{{option.id}}"
               [(ngModel)]="value"
               [value]="option.value"
               />
        <label for="{{option.id}}">{{option.id}}
        </label>
    </div>
  </div>

Ts:

    public options = [
    {value: "on", id:"On"},
    {value: "na", id:"NA"},
    {value: "off", id:"Off"},
  ]

Jeg må også få verdien av den nåværende bryteren.

Vennligst hjelp meg med å oppnå forventet resultat ved dynamisk generering av radioknapper og gjør NA til standardverdi når knappene byttes, og endre verdiene deretter.

Resultatet forventes uten å bruke noen tredjepartsbiblioteker (ikke engang Angular Material er tillatt) eller jQuery.. Det er bra om det skjer en endring i UI, men forventet resultat er basert på ren Angular, TypeScript/JavaScript.

Svar #1

jeg liker virkelig radioknappene til ng-bootstrap https://ng-bootstrap.github.io/#/components/buttons/examples#radio (vel, du kan legge til som stil

.btn-primary.focus, .btn-primary:focus {  
   box-shadow: 0 0 0 0; 
}

For å unngå den «stygge» skyggen i fokus)

Å lage noe lignende uten tredjepartsbiblioteker er å leke med CSS. Hvis vi har et alternativ som

<div *ngFor="let option of options" style="display:inline"  
    [className]="value==option.value?'active':'noactive'" >
    <input class="radio" type="radio" name="state-d" id="{{option.id}}"
            [(ngModel)]="value" [value]="option.value" />
        <label for="{{option.id}}">
           {{option.id}}
        </label>
</div>

Legg bare til

[type="radio"].radio {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;
}
.active{
   color:red;
}
.noactive{
   color:blue;
}

fjern «caret» og gi litt stil til radioknapper. vel, lag en animasjon, det er mer komplekst. Jeg vil prøve å bruke Angular Animations og definere tre tilstander, men jeg er ikke helt sikker på hvordan jeg gjør det

Oppdatert ved å bruke Angular-animasjoner Angulars animasjon i dette tilfellet er enkel. Bare definerte tre tilstander (jeg lager et veldig enkelt eksempel (mine valg vil være en enkel array)

En animasjon er bare definerte tilstander og hvordan man går fra en tilstand til en annen

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('posX',[
      state('uno',style({transform:'translateX(0)'})),
      state('dos',style({transform:'translateX(100px)'})),
      state('tres',style({transform:'translateX(200px)'})),
      transition('* => uno',animate(200)),
      transition('* => dos',animate(200)),
      transition('* => tres',animate(200)),
    ])
  ]
})
export class AppComponent {
  pos:string='uno';
  pos2:string='uno';
  options=['uno','dos','tres'];
}

Animasjonen sier bare det, når [@posX] var 'uno', ikke oversett, når [@posX] var 'dos' oversett 100px til venstre og når [@posX] var 'tres' oversett 200px

En html vil være to div-er som er på samme posisjon (jeg bruker margin-top:-2rem)

<div style="background-color:transparent;">
  <div *ngFor="let option of options" style="display:inline;" >
    <input class="radio" type="radio" name="state-d" id="{{'l'+option}}"
            [(ngModel)]="pos" [value]="option" />
        <label class="radio" for="{{'l'+option}}">
           {{option}}
        </label>
  </div>
</div>
<div style="overflow:hidden;margin-top:-2rem">
   <div  [@posX]="pos" (@posX.done)="pos2=pos" style="background:blue;width:100px" >
      {{pos2}}
  </div>
</div>

Og en CSS for å skjule «karet» og gi bredde til etikettene.

[type="radio"].radio {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;
}
label.radio
{
  width:100px;
}

du kan se i stackblitz

MERK: Obviously er åpenbart et stygt eksempel med stil på linje og ikke i .css

Svar #2

Her er oppdatert Stackbilz-link https://stackblitz.com/edit/angular-qkmkvu HTML-kode`

<h3>Angular 6 Template-Driven Form Validation</h3>
<form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
  <div class="switch-toggle switch-3 switch-candy">
    <div class="radio" *ngFor="let option of options">
      <input type="radio" name="state-d" id="{{option.id}}" [(ngModel)]="value" [value]="option.value" />
      <label for="{{option.id}}">{{option.id}}
      </label>
    </div>
  </div>
</form>

`

TS-kode `

export class AppComponent {
  model: any = {};
  value = "na";
  public options = [
    { value: "on", id: "On" },
    { value: "na", id: "NA" },
    { value: "off", id: "Off" }
  ];

  onSubmit() {
    alert("SUCCESS!! :-)\n\n" + JSON.stringify(this.model));
  }
}

`

Jeg initialiserer bare verdien til den første radioknappen og endrer noen stiler

Relaterte artikler