如何将表单数组传递给其他组件

Question

我想将表单数组传递给子组件以在那里显示表单数组值。下面是我到目前为止尝试过的代码。我无法找到在子组件中显示表单数组值的方法。

app.component.html

<div [formGroup]="userForm">
<div formArrayName="users">
<div *ngFor="let user of users.controls; let i = index">
<input type="text" placeholder="Enter a Room Name" [formControlName]="i">
</div>
</div>
</div>
<button (click)="addUser()">Add Room</button>
<title [users]="users"></title>

app.component.ts

userForm: FormGroup;
constructor(private fb: FormBuilder) {}
public get users(): any {
return this.userForm.get('users') as FormArray;
}
ngOnInit() {
this.userForm = this.fb.group({
users: this.fb.array([this.fb.control('')])
});
}
addUser() {
this.users.push(this.fb.control(''));
}

title.component.html

<div *ngFor="let user of users.controls">{{ user.value }}</div>

title.component.ts

@Input() users;
ngOnChanges(changes) {
console.log(changes);
}

但是上面的代码没有在子组件中显示表单数组值。

堆栈闪电战示例在这里

Answer 1

title是一个关键字，并且已经定义了带有HTML的标记。 只需为组件使用一些不同的名称selector

selector: 'title1',

STACKBLITZ DEMO