如何将formarray传递给其他组件

Question

我想将 formarray 传递给子组件以在其中显示 formarray 值。下面是代码，到目前为止我已经尝试过。我找不到在子组件中显示 formarray 值的方法。

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);
}

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

示例 stackblitz 是 here

Answer 1

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

 selector: 'title1',

STACKBLITZ DEMO

如何将formarray传递给其他组件

How to pass formarray to other component

javascript

typescript

angular

angular-reactive-forms

formarray