如何使用angularJS2中的ReactiveFormModule验证Select元素？

Question

我想在angularJS2中使用ReactiveFormModule验证我的表单，假设我有一个像这样的组件代码

export class userComponent implements OnInit {
    constructor(private fb: FormBuilder) { }
    userForm: FormGroup;
    users = new userDetails();
    ngOnInit(): void {
        this.buildForm();
    }

    buildForm(): void {
        this.userForm = this.fb.group({
            'qualification': [this.users.qualification, Validators.required]
        });

        this.userForm.valueChanges
            .subscribe(data => this.onValueChanged(data));

        this.onValueChanged(); // (re)set validation messages now
    }
    onValueChanged(data?: any) {
        debugger;
        if (!this.userForm) { return; }
        const form = this.userForm;

        for (const field in this.formErrors) {
            // clear previous error message (if any)
            this.formErrors[field] = '';
            const control = form.get(field);

            if (control && control.dirty && !control.valid) {
                const messages = this.validationMessages[field];
                for (const key in control.errors) {
                    this.formErrors[field] += messages[key] + ' ';
                }
            }
        }
    }
    onSubmit() {
        this.users = this.userForm.value;
    }
    formErrors = {
        'designation':''
    };

    validationMessages = {
        'designation': {
            'required':'Please select a designation.'
        }
    };
}

我有一个像这样的HTML代码

<select class="form-control" formControlName="designation" required>
                                <option selected>Select Designation</option>
                                <optgroup label="Accounts">
                                    <option>Trainee</option>
                                    <option>Junior Accountant</option>
                                    <option>Senior Accountant</option>
                                </optgroup>
                                <optgroup label="Sales">
                                    <option>Sales Executive</option>
                                    <option>Sales Regional Manager</option>
                                    <option>Sales Manager</option>
                                </optgroup>
                                <optgroup label="IT">
                                    <option>Junior Software Developer</option>
                                    <option>Senior Software Developerr</option>
                                    <option>Tech Lead</option>
                                    <option>Project Lead</option>
                                    <option>Project Manager</option>
                                    <option>Manager</option>
                                </optgroup>
                            </select>

没有文章，实际上解释了如何验证angularJS2中的选择按钮，我们是否可以使用angularJS2实际验证选择元素？

Answer 1

我一直在寻找同样问题的解决方案，但在任何地方都没有任何有用的帮助。 所以，对于未来的参考，

选择输入只需要required验证（afaik），只需触发submit事件。

记住这些事情我想出了以下解决方案。

1. 将选择值初始化为null（不是空字符串“”）
2. 检查输入/选择是否无效
3. 将输入/选择标记为已触摸
4. 将值设置为空字符串“”

使用以下代码：

validateFormOnSubmit(rootFormGroup: FormGroup){
        Object.keys(rootFormGroup.controls).map((controlName: string) => {
            rootFormGroup.get(controlName).markAsTouched();
            if (rootFormGroup.get(controlName).invalid){
                rootFormGroup.get(controlName).setValue("");
            }
        });
}

然后你可以简单地验证更改后的值是这样的：

rootFormGroup.get(controlName).valueChanges.subscribe((value)=>{
   console.log('change detected')
}