我有一个包含两个字段的被动表单:searchType
和number
。字段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)]
。我怎么能这样做?
答案 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