提交Reactive表单时验证Untouched Required字段

Question

我正在学习角度4并且在反应形式上学习。我的要求是这样的。 选择国家后，我有城市，选择城市后，我有银行，账号是单独的字段，所有情况都必须使用。

现在我无法禁用像这样的提交按钮

<button [disabled]="!txnForm.valid  "type="submit" name="button">Submit</button>

因为我的表单会变得如此之大，因此要添加近10-12个字段。现在，在提交按钮单击时，我想验证表单并将焦点放在正确无效的字段上。

我已经针对无效方案放置了支票，但是对于字段未经修改且需要如何将条件放在html中用于* ngIF 。

e.g。帐号是必需的，但没有触及此我点击继续然后我如何检查并向客户显示错误这是必填字段。

注意：我已经尝试从ts文件中将prestine的值放在formControl上，但我想要一个HTML验证或最小的ts方法。

Answer 1

在您的html文件中：

//onSubmit must be created in your ts file, ex: capture-international-payment.ts
<form #txnForm="ngForm" [formGroup]="your_from_group" (ngSubmit)="onSubmit()> 
    //input fields...
    <input required
           type="text"
           id="account-number"
           formControlName="account_number">
    <button "type="submit" [disabled]="!txnForm.valid>Submit</button>
</form>