angular 从下拉列表中选择选项并相应地输入下一个字段的验证

Question

我是 Angular 的新手，在验证过程中卡住了。

我的问题是我的下拉菜单有 4 个选项 select。当用户 selected 一个选项时，我希望输入字段以这样的方式更改验证：

如果用户 select 下拉列表中的选项 1 比我希望在下一个输入字段中具有所需的验证和最大长度 8 个数字。同样如果用户 select 下拉选项 2。我希望输入字段具有所需的验证和 5 个数字的最大长度。所以我陷入了验证如何去做的困境。任何帮助和想法将不胜感激

Answer 1

这是一个工作示例：https://stackblitz.com/edit/angular5-select-option-dropdown-ynguds

您可以通过多种方式进行，但简而言之：

[1] 我已经构建了一个表单组，以防您需要添加更多字段并在表单中控制它们。

this.group = this.fb.group({
    inputField: new FormControl('',[Validators.required]),
});

如果您的输入字段的值是您以后要使用的值 - 您可以将 Validators.required 设置到该字段，以便用户必须插入一个值。

[2] 在更改下拉项时，该方法会清除输入字段的验证器并添加新验证器，具体取决于从下拉列表中选择的项的索引。

selectionChanged(event) {
    let idx = event.target.value;
    console.log('id:', idx);
    this.group.controls['inputField'].clearValidators();

    if (idx == 0) {
      this.group.controls['inputField'].setValidators([
        Validators.required,
        Validators.maxLength(8),
      ]);
    }
    (...)
    this.group.updateValueAndValidity();
}

更好的方法是为下拉列表设置一个对象数组，您还可以在其中为每个项目定义验证器，这样会更加动态。不管怎样，看看这个适合你。

Answer 2

html:

 <form [formGroup]="selectForm">
 <div class="form-group">
 <label class="float-left">option</label>
 <select class="form-control" (change)="selection($event)" name="select"  
 id="select" formControlName="select">
 <option value="option1">option1</option>
 <option value="option2">option2</option>
 <option value="option3">option3</option>
 </select>
 </div>
                          
 <div class="form-group">
<label class="float-left">Input:</label>
<input type="number" class="form-control" formControlName="input">
</div>
</form>

ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from 
'@angular/forms';

@Component({
 selector: 'app-select',
 templateUrl: './select.component.html',
 styleUrls: ['./select.component.scss']
})
export class SelectComponent implements OnInit { 
}

 selectForm:FormGroup;
 select:null;
 input:any = '';


 constructor(
  private formBuilder: FormBuilder,
  ) { }

 ngOnInit(): void {
  this.createForm();
 }

  createForm(){

   this.selectForm = this.formBuilder.group({
  
   input:["",Validators.required],    
  })  
 }

 selection(event){
  let option = event.target.value;
  console.log('id:', option);
  this.selectForm.controls['input'].clearValidators();

 if (option == "option1") {
  this.selectForm.controls['input'].setValidators([
    Validators.required,
    Validators.maxLength(8),
   ]);
 }
 if (option == "option2") {
  this.selectForm.controls['input'].setValidators([
    Validators.required,
    Validators.maxLength(8),
  ]);
}
if (option == "option3") {
  this.selectForm.controls['input'].setValidators([
    Validators.required,
    Validators.maxLength(8),
  ]);
}

this.selectForm.updateValueAndValidity();
}

angular 从下拉列表中选择选项并相应地输入下一个字段的验证

angular validation for selecting option from drop down and accordingly inputting next field

validation

dropdown

angular