【todo】Angular6问题记录:ngDefaultControl

radio组件中使用input,但在使用组件时,报错,
这里写图片描述
于是查到可以用ngDefaultControl解决:
https://stackoverflow.com/questions/38978166/no-value-accessor-for-form-control-with-name-recipient
但是有浏览器兼容问题,在谷歌的低版本和360浏览器上,点击radio毫无反应
组件代码:
radio.component.ts

import {Component, Input} from '@angular/core';
@Component({
  selector: 'radio',
  templateUrl: './radio.component.html',
  styleUrls: ['./radio.component.css']
})

export class RadioComponent {
  @Input() name: string;
  @Input() value: any;
  @Input() model: any;
}

radio.component.html

<div class="radio-box" [ngClass]="{'radio-active':value==model}">
  <input type="radio" name="{{name}}" value="{{value}}">
  <div class="radio-checked" *ngIf="value==model"></div>
</div>

radio.component.css

.radio-box {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #dfe3eb;
  border-radius: 50%;
  position: relative;
  padding: 0;
  display: inline-block;
}

.radio-box input {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  outline: none;
  opacity: 0;
  z-index: 1000;
}

.radio-active {

}

.radio-checked {
  background: #ff893e;
  width: 10px;
  height: 10px;
  position: absolute;
  z-index: 999;
  top: 5px;
  left: 5px;
  border-radius: 50%;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值