代码之家 › 专栏 › 技术社区 › Hector

具有角度子组件的被动形式

typescript angular javascript

3

Hector · 技术社区 · 7 年前

正如你所看到的,我有一个父窗体组件和一个子组件。 {{myFormFather.value}}显示 nickName 价值和 name 值但不显示 age 价值 {{myFormFather.status}}它无法识别组件子级。就像我的孩子是个幽灵,为什么?

我的生父。html

<form [formGroup]="myFormFather" (ngSubmit)="onSubmit()">
    <input formControlName="nickName">
    <input formControlName="name">
    <my-form-child
            [age]="myFormFather">
    </my-form-child>
    <button type="submit"
            [disabled]="myFormFather.invalid">Save
    </button>
</form>

我的生父。ts

myFormFather = new FormGroup({
    nickName: new FormControl(),
    name: new FormControl()
});

constructor(private fb:FormBuilder) {}

ngOnInit() {this.createForm()}

createForm() {
    this.myFormFather = this.fb.group({
        nickName: ['', [Validators.required],
        name: ['', [Validators.required]
    });
}

我的孩子。html

<div [formGroup]="ageForm">
    <input formControlName="age">
</div>

我的孩子。ts

@Input() ageForm = new FormGroup({
    age: new FormControl()
});

constructor(private fb:FormBuilder) {}

ngOnInit() {this.createForm()}

createForm() {
    this.ageForm = this.fb.group({
        age: ['', [Validators.required]]
    });
}

1 回复 | 直到 7 年前

1

5

Abhijit Kar ã 7 年前

您好,您一直在寻找的解决方案

演示 Stack Blitz

问题是:您重写了从父级传递的表单组

@Input() ageForm = new FormGroup({
  age: new FormControl()
});

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.createForm()
}

createForm() {
  // This is overwriting the FormGroup passed from parent!
  this.ageForm = this.fb.group({
    age: ['', [Validators.required]]
  });

  // Instead you had to use
  // this.ageForm.addControl("age", new FormControl('', Validators.required));
}