Angular 6动态模板参考变量

Question

I have two users from which I need to take input and save partially, Here when I am chaging anything inside one child component both save buttons are enabled. How I can fix it?

Child Component

<div [ngModelGroup]="user" #fieldset="ngModelGroup">
  <input name="first" [ngModel]="user.first" minlength="2">
  <input name="last" [ngModel]="user.last" required>

  <button [disabled]="fieldset.pristine||fieldset.invalid">
    Save
  </button>
</div>

Parent Component

<form>
  <child-component [user]="object1"></child-component>
  <child-component [user]="object2"></child-component>
</form>

Is it possible to template reference variable dynamic

Answer 1

Working StackBlitz Link: link

Note : Thanks benshabatnoam for your efforts.

Parent-Component CODE

import { Component, OnInit } from '@angular/core';

  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {

  users = [
    {first: 'first user first', last: 'first user last'},
    {first: 'second user first', last: 'second user last'}
  ];

  constructor() { }

  ngOnInit() {
  }
}

Parent-Component HTML

// You don't have to iterate, you can have two or more if you like.
// <child-component [user]="users[0]"></child-component>
// <child-component [user]="users[1]"></child-component>

<ng-container *ngFor="let user of users">
  <child-component [user]="user"></child-component>
</ng-container>

Child-Component CODE

import { Component, Input } from '@angular/core';

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent  {
  @Input() user;

  onSubmit(form){ 
    if(form.invalid){
      // Do stuff...
    }
  }
}

Child-Component HTML

<form (ngSubmit)="onSubmit(myForm)" #myForm="ngForm">
  <input [(ngModel)]="user.first" name="first" minlength="2">
  <input [(ngModel)]="user.last" name="last" required>
  <button type="submit" [disabled]="myForm.invalid">
    Save
  </button>
</form>

Answer 2

I provided the unique "ngModelGroup" for each child and my problem is resolved now

Parent.component.html

<form #f="ngForm">
    <child-component [formGroupName]="'user1'" [user]="object1"></child-component>
  <child-component [formGroupName]="'user2'" [user]="object2"></child-component>
</form>
<pre>{{f.value|json}} </pre>

Child.component.html

<div [ngModelGroup]="formGroupName" #fieldset="ngModelGroup">
    <input name="first" [ngModel]="user.first" minlength="2">
    <input name="last" [ngModel]="user.last" required>
    <button [disabled]="fieldset.pristine||fieldset.invalid">
    Save
    </button> 
</div>

Child.component.ts

import { Component, Input } from '@angular/core';
import { ControlContainer,  FormGroup,  NgForm  } from '@angular/forms';

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html',
  viewProviders: [{provide: ControlContainer, useExisting: NgForm}]

})
export class ChildComponent  {
  @Input() formGroupName : string;
  @Input() user;
}