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"和其他字段的相同等效项。

作为旁注，与问题无关，但我建议转向反应形式。你可以更好地控制你的表格。如果您考虑一下，请继续阅读，如果没有，请退出阅读：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中存在两种表单形式：

模板驱动表单
动态表单

Angular Forms

你上面所做的就是两者都没有！

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

使用模板驱动表单，您可以向输入添加变量，然后查看添加的css className以了解哪个css类处于活动状态ng-dirty / ng-valid / ng-touching或者您可以签入您的组件是模型，如果状态不正常，则阻止或禁用提交按钮。

使用Angular Forms，如果取消选中输入，如何使表单无效？

2 个答案: