根据用户选择的下拉菜单设置表单字段的默认值答案

【问题标题】：Set default value of form field based on the dropdown selected by the user根据用户选择的下拉菜单设置表单字段的默认值
【发布时间】：2021-03-19 21:01:58
【问题描述】：

我有一个表单，用户必须在其中输入一堆信息。我正在为一个下拉字段使用 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)

  });

例如，如果用户选择狗，我想将动物声场的默认值设置为吠声。

【问题讨论】：

它不会解决您的问题，但在同一字段上使用 ngModel 和 formControlName 是一种非常糟糕的做法。您应该在控制台中收到警告。您只需使用 formControlName 即可实现您所需要的

标签： html angular typescript

【解决方案1】：

创建具有行为主体的服务；

@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)
});
}

【讨论】：