如何解决如何正确设置Angular2模板驱动的表单验证的最小/最大?
我正在尝试通过模板驱动的表单验证来实现新的Angular组件。我一直在关注文档here,但似乎无法复制结果。具体来说,当输入无效时,只会显示错误的div。
这是上下文的源代码:
模板:
bool selected = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
selected = !selected;
});
},child: Center(
child: AnimatedContainer(
padding: selected ? EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0) :
EdgeInsets.symmetric(vertical: 12.0,horizontal: 30.0),width: selected ? 48 : MediaQuery.of(context).size.width * 0.85,child: selected ? Row(
children: [
Icon(Icons.favorite),],)
: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
Icon(Icons.home),Icon(Icons.message),Icon(Icons.add),Icon(Icons.shopping_cart),Icon(Icons.person_outline),),decoration: BoxDecoration(
color: Colors.grey,borderRadius: BorderRadius.circular(30)),duration: Duration(seconds: 1),curve: Curves.fastOutSlowIn,);
}
}```
[Fig.1][1]
Fig. 1
[Fig.2][2]
Fig. 2
[1]: https://i.stack.imgur.com/hkjPM.jpg
[2]: https://i.stack.imgur.com/nnDTi.jpg
相关组件代码:
<mat-form-field class="input">
<input matInput matTooltip="Float value between 0.0 and 1.0"
type="number"
placeholder="Confidence"
min="0.0"
max="1.0"
[(ngModel)]="confidence"
#value="ngModel">
<mat-error *ngIf="value.invalid && (value.errors.min || value.errors.max)">
Confidence must be an decimal value between 0.0 and 1.0.
</mat-error>
</mat-form-field>
我的理解是,行 metadata = {confidence: 0.0,...};
get confidence(): number {
return this.metadata.confidence;
}
set confidence(confidenceIn: number) {
this.metadata.confidence = confidenceIn;
}
构成了一个局部变量#value="ngModel"
,其中包含声明了该变量的输入元素的值,然后允许我引用value
,如下所示* ngIf指令以检查错误。
但是,当输入值超出范围(小于0,大于1)时,mat-error元素永远不会显示,因此我的理解可能是错误的,并且/或者我执行不正确。
任何解释将不胜感激!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。