1

I have this Review Dialog component :

export class ReviewDialogComponent implements OnInit {

  form: FormGroup;
  comments: string;
  rating: number;

  constructor(
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<ReviewDialogComponent>,
    @Inject(MAT_DIALOG_DATA) data) {

   this.comments = data.comments;
   this.rating = data.rating;

   this.form = fb.group({
     comments: [this.comments, []],
     rating: [this.rating, []]
  });
  }
  ngOnInit() {
   }
  save() {
    this.dialogRef.close(this.form.value);
   }
  close() {
   this.dialogRef.close();
  }
}

The html : 

  <mat-dialog-content [formGroup]="form">

   <mat-form-field>
     <textarea matInput
            placeholder="Comments"
            formControlName="comments">
     </textarea>
   </mat-form-field>

   <mat-form-field>
     <mat-select placeholder="Select rating"
            formControlName="rating">

      <mat-option value="1">1</mat-option>
      <mat-option value="2">2</mat-option>
      <mat-option value="3">3</mat-option>
      <mat-option value="4">4</mat-option>
      <mat-option value="5">5</mat-option>
     </mat-select>
  </mat-form-field>

</mat-dialog-content>

And usage : 

addReview() {
   const dialogConfig = new MatDialogConfig();

   dialogConfig.disableClose = true;
   dialogConfig.autoFocus = true;

   dialogConfig.data = {
      comments: '',
      rating: null
   };

   const dialogRef = this.dialog.open(ReviewDialogComponent,
      dialogConfig);

   dialogRef.afterClosed().subscribe(
      val => console.log("Dialog output:", val)
    );
}

I have all the imports needed, it loads the dialog but it returns the error after a few seconds. I've tried adding ngDefaultControl but after that I receive "Error: mat-form-field must contain a MatFormFieldControl." so it doesn't really help. Also, I've already checked angular2 rc.5 custom input, No value accessor for form control with unspecified name, didn't help. What am I missing ?

Thanks a lot !

Frey_ja
  • 51
  • 13
  • Possible duplicate of [Angular4 - No value accessor for form control](https://stackoverflow.com/questions/45659742/angular4-no-value-accessor-for-form-control) – Neeko May 13 '18 at 19:58
  • I already checked this one, didn't help – Frey_ja May 13 '18 at 20:01

1 Answers1

0

Rename your form name because it is a reserved keyword. And pass data in form like this in ngOnInit(), not in the constructor:

ngOnInit() {
    this.feedbackForm = fb.group({
    comments: [this.comments],
    rating: [this.rating]
    });
}

Remove the empty validation square brackets.

Prachi
  • 3,478
  • 17
  • 34