问题描述
我正在尝试通过模板驱动的表单验证来实现新的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 (将#修改为@)