html - 根据用户选择的下拉菜单设置表单字段的默认值
问题描述
我有一个表单,用户必须输入一堆信息。我正在为一个下拉字段使用 mat-select。我要做的是根据用户选择的下拉菜单设置另一个表单字段的默认值。我怎样才能做到这一点。在此先感谢您的帮助。
这是我的模板:
<form [formGroup]="newFormGroup" (ngSubmit)="submit()">
<div f>
<mat-form-field appearance="fill" >
<mat-label>Animal Sound</mat-label>
<input matInput type="text" formControlName="animalSound" [(ngModel)]="sound" name="animalSound" class="form-control" id="animalSound">
</mat-form-field>
<mat-form-field appearance="fill" style="width: 10%;">
<mat-label>Animal</mat-label>
<mat-select formControlName="animal" [(ngModel)]="selectedValue">
<mat-option *ngFor="let animal of animals" [value]="animal.value">
{{animal.value}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>
这是我的 ts 代码:
selectedValue: string;
sound = 'bark';
animals: AnimalType[] = [
{value: 'Cat' },
{value: 'Dog'} ];
newFormGroup = new FormGroup({
animalSound: new FormControl('', Validators.required),
animal: new FormControl('', Validators.required)
});
例如,如果用户选择狗,我想将动物声场的默认值设置为吠声。
解决方案
创建具有行为主体的服务;
@Injectable({provideIn: 'root'})
class DropdownService {
value = new BehaviourSubject('Default')
setValue(value: string){
this.value.next(value);
}
getValue() {
return this.value.asObservable();
}
}
在下拉组件上设置值
然后在表单组件中获取值
constructor(private dropdownService: DropdownService) {}
ngOnInit(){
// after your form initiated
this.dropdownService.getValue().subscribe(value => {
this.form.controls.field.setValue(value)
});
}
推荐阅读
- c - 当使用 SIGINT 之类的信号中断 C 程序时会发生什么?
- mysql - mysql如何捕捉更新语句是否执行成功
- java - JPMS ServiceLoader 无法按预期为我工作
- reactjs - 如何将 django 日历项目与移动应用日历同步?
- angular - 以角度从 localStorage“本地 CartItems”获取一个数据/项目
- c# - 在 .NET 5.0 中打开 Windows 窗体时连接到命名管道时超时
- shell - grep 在目录中查找保存在文件中的一组搜索模式
- javascript - 多标准过滤器
- java - 如何使用 Spring Boot 在运行时提供静态资源?
- wifi - ESP32;禁用在 nvs 中保存 wifi 凭据