Angular [已选择] 不适用于 formControlName答案

【问题标题】：Angular [selected] not working with formControlNameAngular [已选择] 不适用于 formControlName
【发布时间】：2019-11-20 08:08:02
【问题描述】：

我有以下基本设置：

在我的 component.ts 中：

const usersFormGroup = this.formBuilder.group({
  ...
  defaultSeNumber: [''],
  ...
});

this.settingsForm = this.formBuilder.group({
  usersForm: usersFormGroup,
  ...
});

然后我有以下 HTML 文件：

父母

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
    ...
    <child1 [formGroup]="formGroup.controls.usersForm"></child1>
    ...
</form>

孩子1：

<ng-container [formGroup]="formGroup">
    ...
    <child2 [selectedSeNumber]="'11012977'"></child2>
    ...
</ng-container>

孩子2：

<select class="form-select input-width-xl abc" id="seNumber">
<option *ngFor="let item of seNumbers;" [value]="item.seNumber"
        [selected]="item.seNumber == selectedSeNumber">{{ item.seNumber }}</option>
</select>

我不知道如何将formControlName 一直带到<select>，以便[selected] 都可以工作并且所选值将被带回我的@987654328 @ 在表单提交时。

我已经在每个组件上尝试了formControlName/[formControlName] 的大多数组合。

我应该补充一点，我可以让 [selected] 工作，但是在提交时不会将值发回。我也可以将值发送回 onSubmit，但 [selected] 不起作用。

我希望 child2 组件接受必要的输入，以使其成为具有可自定义 formControlName 的可重用表单组件。

【问题讨论】：

几个月前我在我的 Angular 项目中遇到了同样的问题。我做了和你一样的东西。但是，它没有用。我的解决方案是 Angular 表单内没有自定义组件，因为它有时无法工作并且验证失败。

标签： angular

【解决方案1】：

在你的打字稿文件里面ngOnInit()addthis.usersFormGroup.controls["defaultSeNumber"].setValue(this.selectedSeNumber);

删除[selected]="item.seNumber == selectedSeNumber"

【讨论】：

这适用于一个例外：我的 formControlName 必须始终相同。这是我可以忍受的东西，直到我必须将两个 child2 组件放入同一个表单中。

【解决方案2】：

如果在 main.app 中创建表单，为什么不传递 formControl 或 formGroup 并在 children 中使用 [formControl]="control"？

父母

formGroup=new FormGroup({
   ...
   usersForm:new FormGroup({
      ....
      selectedSeNumber:new FormControl()
   })
})

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
    ...
    <child1 [group]="formGroup.get('usersForm')"></child1>
    ...
</form>

孩子 1

@Input('group')fromGroup:FormGroup

<ng-container [formGroup]="formGroup">
    ...
    <child2 [control]="formGroup.get('selectedSeNumber')"></child2>
    ...
</ng-container>

孩子2

@Input('control') formControl:FormControl

<select class="form-select input-width-xl abc" id="seNumber" 
    [formControl]="formControl">
    <option *ngFor="let item of seNumbers;" [value]="item.seNumber">
       {{ item.seNumber }}
    </option>
</select>

【讨论】：

这也是我所做的。可能主 formGroup 由 4 个单独的 fromGroups 组成，每个都传递给一个组件并传递给进一步的子组件。