Как проверить элемент Select с помощью ReactiveFormModule в angularJS2?

Question

Я хочу, чтобы проверить свою форму с помощью ReactiveFormModule в angularJS2, Предположим, у меня есть код компонента, как этот

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> 

Там нет статьи, которая на самом деле объясняет, как проверить кнопку select в angularJS2, можно ли мы фактически проверить элемент select с помощью angularJS2?

Answer 1

Я искал решение той же проблемы, но никакой полезной помощи нигде нет. Итак, для будущего ref,

Выберите Входы требуется только required валидация (afaik), и это необходимо только для запуска по событию submit.

Помня об этом, я придумал следующее решение.

1. Инициализировать выбрать значения до нуля (не пустая строка «„)
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') 
}