使用角形式，如果取消选中输入，我如何使形式无效

Question

使用Angular 5，我尝试了一些变体。如果我将其设置为ngModel="iAgreeToTOS" required的复选框，它似乎只有在与复选框进行互动并单击它的复选框后工作。

<div class="input-group mb-3">
    <span class="input-group-addon">
        <i class="ft-mail"></i>
    </span>
    <input type="email" class="form-control" name="email" id="email" placeholder="Email" ngModel required email >
</div>
<div class="form-group col-sm-offset-1">
    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
        <input type="checkbox" class="custom-control-input" checked>
        <span class="custom-control-indicator"></span>
        <span class="pl-2">I agree to <a>terms and conditions</a></span>
    </label>
</div>
<div class="form-group text-center">
    <app-async-button submitText="Banana" [disabled]="!registrationForm.valid || !this.iAgreeToTOS" [submit]="register" [loading]="loading"></app-async-button>
    <button type="submit" class="btn btn-warning btn-raised" [disabled]="!registrationForm.valid">Sign Up</button>
</div>

Answer 1

您可以通过绑定ngModel和name属性来实现此目标：

<form #registrationForm>
  <!-- -->
  <input type="checkbox" ngModel name="iAgreeToTOS" required>
  <!-- -->
</form>

另外，如果您想显示验证错误，则需要记住标记#iAgreeToTOS="ngModel"和其他字段相同的等效。

---

作为A sidenote ，与问题无关，但我建议您采用反应性形式。您可以更好地控制自己的表格。如果您考虑它，请继续阅读，如果没有，请阅读：D以下是您的反应性方法的示例：

registrationForm: FormGroup;
constructor(private fb: FormBuilder) {
  this.registrationForm = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    agreeToTerms: [false, Validators.pattern('true')]
  });

html：

<form [formGroup]="registrationForm">
  <input formControlName="email" />
  <input type="checkbox" formControlName="agreeToTerms" />
</form>

Answer 2

在Angular中存在两种表格的方式：

• 模板驱动的表单
• 动态形式

角形式

您上面拥有的不是两者！

使用动态表格，您可以将表单标记为脏/有效/触摸，然后可以阻止或禁用提交按钮。

使用模板驱动的表单您可以在输入中添加一个变量，然后查看使用className的添加的CSS，以了解哪个CSS类是Active ng-dirty/ng-dirty/ng-valid/ng-touched，或者您可以在组件中检查模型，如果状态不正确，则阻止或禁用提交按钮。