Angular-应用程序组件架构

Question

I'm currently experimenting with the design of an application component in Angular 7.* . Not having worked a lot with it, I'm finding it hard to design a clean components architecture.

This component, lets call it MainComponent receives a JSON input such as

{
   "name": "name",
   "description": "description",
   "attributes": [ // Rectangle in the image
      {
         "attr1": "value", // Editable
         "attr2": "value", // Editable
         "attr3": "value"  // Editable
      },
      {
         "attr1": "value", // Editable
         "attr2": "value", // Editable
         "attr3": "value"  // Editable
      },
      ...
   ]
}

The important field is attributes . Each of its elements will be displayed as a separate area, which I'd like to code as a new component.

Each attributes element become a rectangle inside the main one.
And each field of an attribute is editable, so a FormGroup has to be constructed.

However, saving is global, not per sub-component.
And I need to take care of "listening" to which values have been modified inside each component.

I've thought about two solutions.

1. Have a FormGroup at the main level, with multiple sub- FormGroup s, one per each sub-component. Each sub- FormGroup is inputted inside a sub- Component . On save I just look at the main FormGroup, it already contains every changed value.

2. Each sub-component owns a separate FormGroup . On save, the main component asks (that is call a method) each sub-component to retrieve modified values.

Which solution is most suited to Angular ? What would you do?

Edit : what I'm asking is what's the better way to distribute a JSON input to multiple sub-components, taking care of retrieving the edited values on save, which is at the upper/main level.

Answer 1

Here is a working solution.

I've used FormArray . For more info, read it here

First, let's create an input component and call it MyInputComponent

@Component({
  selector: 'my-input',
  template: `
    <div>
      Attr1: <input type="text" [ngModel]="value.attr1" 
               (ngModelChange)="updateModel($event, 'attr1')" />
    </div>
    <div>
      Attr2: <input type="text" [ngModel]="value.attr2" 
               (ngModelChange)="updateModel($event, 'attr2')" />
    </div>
  `
})
export class MyInputComponent {
  value;

  updateModel(value, attrName) {
    this.value[attrName] = value;
  }
}

It's a pretty simple component. It contains two inputs (you can add more) and binds a model to that input using ngModel . For now, it does not expose anything to outside world. On change of any of the inputs, it updates value accordingly.

Now, let's use it in our main.component

Let's say you have following data

  attributes = [
    { 'attr1': 'value1', 'attr2': 'value12'},
    { 'attr1': 'value2', 'attr2': 'value22'},
    { 'attr1': 'value3', 'attr2': 'value32'},
  ];

And, you can use this component within your template as follows

<div *ngFor="let attr of attributes; let i = index">
  <my-input></my-input>
  <hr />
</div>

Now, let's bind formArrayName and formControlName to that input.

For that, we import ReactiveFormsModule in our module and make MyInput implement ControlValueAccessor

my-input.component

@Component({
  selector: 'my-input',
  template: `
    <div>
      Attr1: <input type="text" [ngModel]="value.attr1" (ngModelChange)="updateModel($event, 'attr1')" />
    </div>
    <div>
      Attr2: <input type="text" [ngModel]="value.attr2" (ngModelChange)="updateModel($event, 'attr2')" />
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyInputComponent),
      multi: true
    }
  ]
})
export class MyInputComponent implements ControlValueAccessor {

  value;

  onChange;
  onTouched;
  disabled = false;

  updateModel(value, attrName) {
    this.value[attrName] = value;
    this.onChange(this.value); // now I call onChange method to update the value within form
  }

  // comes from ControlValueAccessor
  writeValue(newValue): void {
    this.value = newValue;
  }

  // comes from ControlValueAccessor
  registerOnChange(fn: (rating: number) => void): void {
    this.onChange = fn;
  }

  // comes from ControlValueAccessor
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  // comes from ControlValueAccessor
  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

}

And change the template of main component to

<div [formGroup]="myForm">
  <div formArrayName="array">
    <div *ngFor="let attr of attributes; let i = index">
      <my-input [formControlName]="i"></my-input>
      <hr />
    </div>
    <button (click)="save()">Save</button>
  </div>
</div>

And you need to create a formGroup within main component as follows

export class AppComponent  {

  myForm = this.fb.group({
    array:  this.fb.array([])
  })

  attributes = [
    { 'attr1': 'value1', 'attr2': 'value12'},
    { 'attr1': 'value2', 'attr2': 'value22'},
    { 'attr1': 'value3', 'attr2': 'value32'},
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    const arrayFormControl = this.myForm.get('array') as FormArray;
    this.attributes.forEach(attr => 
      arrayFormControl.push(this.fb.control(attr)));
  }

  save() {
    console.log(this.myForm.value);
  }
}

Answer 2

I think the best way to solve these types of problems (data sharing). we should always create a common service. place a single FormGroup there. and write methods in each component to update the value of that form group. and eventually a method to get value of form group. It is by far the best method to write shared FormGroup code in services.

this.lotTwoFormGroup = this.formBuilder.group({
  title: ['', Validators.compose([Validators.required])],
  description: ['', Validators.compose([Validators.required])],
  dutchTitle: [''],
  dutchDescription: [''],
  frenchTitle: [''],
  frenchDescription: ['']
});