角三状态开关

Question

在我的角度6应用程序中，我需要使用三个有顺序的状态切换开关，

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

我使用了以下Html，

<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>

无法共享css文件，因为它有很多代码..

工作示例： https://stackblitz.com/edit/angular-6-template-driven-form-validation-z2rsig

在其中你可以看到两次制作的开关盒，其中第一个是完全硬编码的单选按钮。

但是，在第二步，我试图使它的动态，但我无法获得相同的UI和选择的开关值。

我需要的是，需要使三状态切换开关具有作为On --- NA --- Off的值。如果用户切换到Off，那么state-d的值需要是Off，如果是它的On，那么state-d的值需要是On，对于NA也是。默认情况下，需要选择(选中) NA。

我需要的结果就像链接https://stackblitz.com/edit/angular-6-template-driven-form-validation-z2rsig中的第一个一样

但是单选按钮需要是动态的，就像我在同一个链接中尝试了第二个。(不起作用)。

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"},
  ]

另外，我需要得到当前开关的值。

请帮助我实现预期的结果，通过动态生成单选按钮，并使NA的默认值，在切换按钮，使值相应地改变。

使用任何第三方库(甚至不允许使用角材料)或jquery.如果UI中有更改，这是很好的，但是预期的结果是纯角度的，基于类型/javascript。

Answer 1

真的，我喜欢ng引导https://ng-bootstrap.github.io/#/components/buttons/examples#radio的单选按钮(嗯，您可以添加样式)。

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

避免焦点上的“丑陋”阴影)

做一些类似的没有第三方库是玩css。如果我们有这样的选择

<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>

简单地添加

[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;
}

删除“插入符号”，并给一些样式的单选按钮。好吧，让动画变得更复杂。我将尝试使用角动画来定义三种状态，但我不太确定如何实现它

更新使用角动画的在这种情况下是容易的。刚刚定义了三种状态(我做了一个非常简单的例子(我的选项将是一个简单的数组)

动画只定义状态以及如何传递到一种状态到另一种状态。

@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'];
}

动画只说，当@posX是'uno‘时，没有翻译，当@posX是'dos’时，将100 to翻译到左边，当@posX是'tres‘翻译200 to时。

html将是位于相同位置的两个div(我使用边距-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>

和一个css来隐藏“插入符号”和给标签的宽度。

[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;
}

您可以在stackblitz中看到

注意:很明显，这是一个丑陋的示例，它的样式是内联的，而不是在.css中。

Answer 2

下面是更新的Stackbilz链接https://stackblitz.com/edit/angular-qkmkvu HTML代码

<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码

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));
  }
}

`

我只是初始化了第一个单选按钮值，并更改了一些样式。

Answer 3

您需要将值绑定到选定的选项卡，如下所示。

只要输入值被更改，输入的[checked]="value === 'on'"就会被检查，而当值被更改时，您可以像这样绑定回value模型，比如(change)="onSelectionChange('on')"。您的表单模型看起来很好，没有任何更改，但是单选按钮可以这样处理，让它们同步。

<form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
                    <div class="form-group">
                        <div class="switch-toggle switch-3 switch-candy">
                            <input id="on" name="state-d" [value]="on"  [checked]="value === 'on'"  type="radio" (change)="onSelectionChange('on')" >
                            <label for="on">ON</label>

                            <input id="na" name="state-d"  [value]="na" [checked]="value === 'na'"  type="radio" checked="checked" (change)="onSelectionChange('na')">
                            <label for="na" >N/A</label>

                            <input id="off" name="state-d"  [value]="off"  [checked]="value === 'off'"  type="radio" (change)="onSelectionChange('off')">
                            <label for="off" >OFF</label>

                            <a></a>
                        </div>
                    </div>
                </form>

你的组件

export class AppComponent {
  model: any = {};

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

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

  onSelectionChange(entry) {
    this.value = entry;
  }
}

演示

编辑：

添加了一个动态输入的演示，

您需要像这样使用ng-container

<form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
                    <div class="form-group">

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

演示