我试图以这样的方式设置表单,当有人在第一个下拉列表中选择
Mr
时,第二个下拉列表中的值将更改为 male
。
同样,如果有人选择 Miss/Mrs
,第二个下拉菜单将更改为 female
。
我怎样才能实现这个目标?
这是 HTML
<div class="master">
<select [(ngModel)]="registration.salutation">
<option value="Mr">Mr </option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
<option value="Dr">Dr</option>
<option value="Prof">Prof</option>
</select>
</div>
<div class="slave">
<select [(ngModel)]="registration.gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="others">Others</option>
</select>
</div>
这是.TS:
ngOnInit(): void {
//this.registration.salutation = 'Mr';
if(this.registration.salutation = 'Mr') {
this.registration.gender = 'male';
}
if(this.registration.salutation = 'Mrs' || 'Miss') {
this.registration.gender = 'female';
}
}
目前,当我在第一个下拉列表中选择任何值时,什么也不会发生。
您可以使用
ngModelChange
事件来应用您的逻辑:
<div class="master">
<select [(ngModel)]="registration.salutation" (ngModelChange)="salutationChange()">
<option value="Mr">Mr </option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
<option value="Dr">Dr</option>
<option value="Prof">Prof</option>
</select>
</div>
salutationChange() {
if(this.registration.salutation = 'Mr') {
this.registration.gender = 'male';
}
if(this.registration.salutation = 'Mrs' || 'Miss') {
this.registration.gender = 'female';
}
}