Angular表单字段的不同验证器基于另一个字段值

时间:2017-10-22 12:00:51

标签: angular validation angular-reactive-forms

我有一个包含两个字段的被动表单:searchTypenumber。字段searchType只能为“0”或“1”。 number是一个数字,数字有一些验证。

this.searchForm = this.formBuilder.group({
  searchType: ['0'],
  number: [
    undefined,
    [ Validators.required, Validators.minLength(6) ]
  ]
});

但是现在我只想在number为1时为searchType添加一些特定的验证器。例如,如果searchType为0,我必须使用[ Validators.required, Validators.minLength(6) ],但是如果searchType是1我必须使用[ Validators.required, Validators.minLength(8), Validators.minLength(20)]。我怎么能这样做?

1 个答案:

答案 0 :(得分:2)

您可以在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="gallery"> <div class="col-md-3 img-box"> <input type="checkbox" id="image_23" name="pics[]" value="wave-2211925_640.jpg" data-id="image_23"> <label for="image_23" style="background-image: url(https://kbob.github.io/images/sample-3.jpg)"> <i class="glyphicon glyphicon-ok"></i> </label> </div> </div> <ul class="dropdown-menu context-menu"> <li><a href="#">RELOAD</a></li> <li><a href="#">SETTINGS</a></li> <li><a href="#">LOGOUT</a></li> </ul>上进行更改活动,或者订阅searchType,然后为valueChanges表单控件设置验证器。

number

searchtypeCtrl: FormControl; numberCtrl: FormControl; this.searchForm = this.formBuilder.group({ searchType: ['0'], number: [undefined,[ Validators.required, Validators.minLength(6) ]] }); // set form controls to variables this.searchTypeCtrl = this.searchForm.get('searchType'); this.numberCtrl = this.searchForm.get('number'); 。如上所述,您还可以侦听某些更改事件并调用检查valueChanges值的方法并相应地更新验证器。

searchTypeCtrl