Friday 31 August 2018

Input Material Chips -- Init Form Array

I want to init my mat chips input with input data but when I have two chips, it forms only one form :

enter image description here

*.component.ts

@Component({
  selector: 'app-pps-dialog',
  templateUrl: './pps-dialog.component.html',
})

export class PPSDialogComponent  implements OnInit {

patientid: string;
ppsForm: FormGroup;
ppssToDisplay;


visible: boolean = true;
selectable: boolean = true;
removable: boolean = true;
addOnBlur: boolean = true;
// Enter, comma
separatorKeysCodes = [ENTER, COMMA];


constructor(
private route: ActivatedRoute, 
private ppssService:PPSsService,
private _changeDetectorRef: ChangeDetectorRef,
private location: Location,
private router: Router, 
public dialog: MatDialog, 
private formBuilder: FormBuilder,
public dialogRef: MatDialogRef<PPSDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) 

{ this.initForm(); }

ngOnInit(): void {
    this.ppssToDisplay = this.ppssService.getSinglePPS(this.key)
      .subscribe(res => {
        this.ppssToDisplay = res;
        this.ppsForm.controls['requirements'].setValue(Array(this.ppssToDisplay.effetsind));
            console.log(this.ppssToDisplay.effetsind)); 
      });


  add(event: MatChipInputEvent): void {
        let input = event.input;
        let value = event.value;
        // Add our requirement
        if ((value || '').trim()) {
            this.requirements = this.ppsForm.get('requirements') as FormArray;
            this.requirements.push(this.formBuilder.control(value.trim()));
        }
        // Reset the input value
        if (input) {
            input.value = '';
        }
    }

    remove(index: number): void {
        const requirements = this.ppsForm.get('requirements') as FormArray;

        if (index >= 0) {
            requirements.removeAt(index);
        }
    }

        initForm(): void {
            this.ppsForm = this.formBuilder.group({
               requirements: this.formBuilder.array(['']),
               // I don't know why, but I must init my form with empty chips if I want to receive data from service.
            });
        }

        get formData() {
          return <FormArray>this.ppsForm.get('requirements');
        }

*ppss.service

import { Injectable } from '@angular/core';
import { Patient } from '../models/patient.model';
import { PPS } from '../models/pps.model';
import { AngularFireDatabase, AngularFireList, AngularFireObject} from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import {switchMap, map} from 'rxjs/operators';
import * as firebase from 'firebase';
import DataSnapshot = firebase.database.DataSnapshot;


@Injectable({
  providedIn: 'root'
})
export class PPSsService {
ppss: AngularFireList<any>;

constructor(private database: AngularFireDatabase) {this.ppss = database.list('ppss');}
getSinglePPS(key: string){
    return this.database.object('ppss/' + key).valueChanges();
   }

}

console.log(this.ppssToDisplay.effetsind):

 (2) ["Troubles de la vessie", "Troubles de l'érection"]

I've used the example of Angular Material:

*.component.html

<mat-form-field style="width:50%" appearance="outline">
  <mat-label>Description du traitement</mat-label>
  <textarea matInput formControlName="description"></textarea>
</mat-form-field>

<mat-form-field style="width:50%" appearance="outline">
  <mat-label>Effets indésirables du traitement</mat-label>
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let requirement of formData.controls; let i = index;" [selectable]="selectable"
              [removable]="removable" (removed)="remove(i)">
      
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input placeholder="Nouvel effet indésirable..."
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)"/>
  </mat-chip-list>
</mat-form-field>

ERROR Error: Must supply a value for form control at index: 0:

> core.js:1598 ERROR Error: Must supply a value for form control at index: 0.
        at forms.js:4304
        at forms.js:4274
        at Array.forEach (<anonymous>)
        at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._forEachChild (forms.js:4274)
        at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._checkAllValuesPresent (forms.js:4302)
        at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray.setValu

I have the same problem if I init my form with :["Troubles de la vessie", "Troubles de l'érection",...]



from Input Material Chips -- Init Form Array

No comments:

Post a Comment