1

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を使用して選択要素を実際に検証できますか?

4

1 に答える 1