Question

我正在Angular组件中创建一些模板驱动的表单。显然，目标是直到所有字段都有效后才允许用户提交表单。当我让用户发送POST请求（即从头开始创建内容）时，此方法效果很好。

但是，当我有一个表单来更新某些内容时，它允许用户在表单可能尚未生效之前提交表单。这是因为当我预填充表单时，状态已更改吗？我需要更改什么以确保按钮在完全有效之前保持禁用状态？

dplyr::as_tibble(species_df)
# A tibble: 284 x 20
   Ref   Common_group Common_species Genus Species Jan   Feb   Mar   Apr   May   Jun   Jul  
   <fct> <fct>        <fct>          <fct> <fct>   <fct> <fct> <fct> <fct> <fct> <fct> <fct>
 1 8     Albatross    Black-browed   Thal~ melano~ 0     0     0     0     0     0     3.2  
 2 1079  Albatross    Indian Yellow~ Thal~ carteri 0     0     0     0     0     0     3.2  
 3 4150  Albatross    Shy            Thal~ cauta   0     0     0     0     0     0     3.2  
 4 622   Apalis       Bar-throated   Apal~ thorac~ 22    31.8  38.9  33.3  30.8  46.7  38.7 
 5 625   Apalis       Yellow-breast~ Apal~ flavida 9.8   9.1   22.2  11.1  12.8  26.7  16.1 
 6 432   Barbet       Acacia Pied    Tric~ leucom~ 0     0     0     0     2.6   0     0    
 7 431   Barbet       Black-collared Lybi~ torqua~ 63.4  77.3  72.2  50    89.7  73.3  67.7 
 8 439   Barbet       Crested        Trac~ vailla~ 14.6  40.9  38.9  16.7  25.6  13.3  9.7  
 9 433   Barbet       White-eared    Stac~ leucot~ 17.1  18.2  11.1  44.4  35.9  40    35.5 
10 672   Batis        Cape           Batis capens~ 2.4   13.6  11.1  5.6   0     0     0    
# ... with 274 more rows, and 8 more variables: Aug <fct>, Sep <fct>, Oct <fct>, Nov <fct>,
#   Dec <fct>, RepRate <fct>, Records <fct>, Cards <fct>

部分问题是自从首次创建项目以来，模型要求已更改。例如，某个项目是在不需要添加时区的情况下创建的，现在它要求您在使用编辑表单时添加时区。我不希望我的表单在不添加所需时区的情况下提交。

让我知道是否可以提供更多信息！非常感谢

Answer 1

您可以像这样设置按钮的禁用属性：

<button type="submit" [disabled]="!editMPForm.form.valid">Save Edits</button>

Angular 6模板驱动的表单-禁用编辑表单上的提交按钮

1 个答案: