Question

验证表单时，您可以检查用户是否触摸了输入，复选框等（X.touched）。是否有验证器中的内置版本，用户必须至少触摸一次每个输入（选项卡等）。

背景：我有一个带复选框的表单，用户必须验证输入是否正确。由于复选框只能有两个状态，我用false初始化它们，但我希望用户至少检查一次

Answer 1

试试这样：

<form name="form" role="form" class="form-horizontal" novalidate #form="ngForm">
    <div class="form-group">
        <label class="col-sm-2 control-label">Checkbox Label</label>
        <div class="col-sm-10 checkbox">
            <label class="i-checks">
                <input type="checkbox" name="checkboxLabel" id="checkboxLabel" [(ngModel)]="checkboxLabel"><i></i>
            </label>
            <div [hidden]="form.controls.checkboxLabel?.touched">
                Checkbox not touched
            </div>
        </div>
    </div>
</form>

Answer 2

您可以将用于创建复选框的数组旁边的并行数组（所有值设置为false）保持相同的大小。每次更改复选框时，将该数组值更改为true。然后添加监听器以进行表单更改：

@ViewChild('myForm') myForm: NgForm;
myForm: NgForm;
....
ngOnInit() {
    this.myForm.valueChanges.subscribe((value: any) => {
         console.log("One of the checkbox was touched");
         // here check if the all values of array are true
    });
}

不是最聪明的＆＃39;解决方案，但将工作

验证，用户触摸了每个输入

2 个答案: