Question

我尝试从组件中的host属性绑定我的formgroup，但它返回错误

@Component({
  selector: 'form[random-form]',
  moduleId: module.id,
  templateUrl: 'random-form.component.html',
  host: {"class": "random", "(document:click)" : "onDocumentClick($event)",
        "[formGroup]" : "form"}
})
export class RandomForm implements OnInit {
    form : FormGroup;
}

它会返回错误

zone.js:643 Unhandled Promise rejection: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("

这就是我调用组件的方式

<form random-form>
    </form>

我在app.module.ts和后续模块中也导入了ReactiveFormsModule，FormsModule。我很确定这是主机的问题，因为如果我将它放在模板中，它将起作用

Answer 1

当一个组件依赖于另一个组件时，使用依赖项注入。如果在DOM中找不到该组件，则会引发错误（除非您将其标记为@Optional）。

public constructor(formGroup: FormGroupDirective) {
}

您无法使用主机绑定来创建其他组件。我希望我们可以，但我怀疑当现有DOM组件与主机绑定之间发生冲突时，这会引发更多问题。

您可以使用Angular 4.x在运行时相对轻松地创建组件，如果找不到，则添加FormGroup。

public constructor(@Optional() public formGroup: FormGroupDirective,
                   public factory: ComponentFactoryResolver,
                   public view: ViewContainerRef) {
}

public ngAfterViewInit() {
    if(!this.formGroup) {
         this.formGroup = this.view.createComponent(this.factory.resolveComponentFactory(FormGroupDirective));
        this.formGroup.form = /*** build your form here **/
    }
}

现在，我不知道上述内容是否适用于指令。我之前从未使用createComponent来创建指令。由于指令没有模板，我不确定上述是否有效。

Answer 2

我希望这将是你的解决方案。

template.html

    <form [formGroup] = "myForm" (ngSubmit) = "submitForm(myForm.value)">
         <input type="password"  id="password" value="{{password}}" formControlName="password" />
         <input class="button" type="submit" value="Search" />
    </form>

component.ts

import {FormGroup, FormControl, FormBuilder, Validators} from '@angular/forms';

export class RandomForm implements OnInit {
    myForm : FormGroup;
    password: string = "";

    constructor(private _fb: FormBuilder) { }

    ngOnInit() {
        this.myForm = this._fb.group({
             password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]]
        });
    }

    submitForm(value) {
       //you can get the values or the myForm here like this value.password;
    }
}

使用组件中的HostBiinding绑定formGroup

2 个答案: