Question

我具有以下基本设置：

在我的component.ts中：

(require '[clojure.java.io :as io])
(import '[java.nio.file Files Paths]
        '[java.nio.file.attribute FileAttribute])

(def user-home (System/getProperty "user.home"))
(def user-pwd (System/getProperty "user.dir"))

(defn path [p]
  (let [expanded (.replaceFirst p "^~" user-home)]
    (Paths/get expanded (make-array String 0))))

(defn symlink
  [link target & attrs]
  (let [link-path (path link)
        target-path (path (.getPath (io/file user-pwd target)))]
    (Files/createSymbolicLink link-path target-path (into-array FileAttribute attrs))))

然后我有以下HTML文件：

父母

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

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

Child1：

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

Child2：

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

我无法弄清楚如何将<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]。

我在每个组件上尝试了settingsForm / formControlName的大多数组合。

我应该补充一点，我可以使[selected]工作，但是该值不会在onSubmit上发送回去。同样，我可以将值发送回onSubmit，但是然后[selected]不起作用。

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

Answer 1

如果您在main.app中创建表单，为什么不通过formControl或formGroup并在子级中使用[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>

Child2

@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>

Answer 2

在您的打字稿文件中ngOnInit()内添加this.usersFormGroup.controls["defaultSeNumber"].setValue(this.selectedSeNumber);

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

Angular [selected]无法与formControlName一起使用

2 个答案: