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传递给其他组件

1 个答案: