Question

我有这个评论对话框组件：

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();
  }
}

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>

用法：

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)
    );
}

我有所需的所有导入，它会加载对话框，但几秒后它会返回错误。我尝试添加 ngDefaultControl ，但之后我收到＆＃34;错误：mat-form-field必须包含MatFormFieldControl。＆＃34;所以它并没有真正帮助。另外，我已经检查了angular2 rc.5 custom input, No value accessor for form control with unspecified name，没有帮助。我错过了什么？

非常感谢！

Answer 1

重命名您的表单名称，因为它是保留关键字。并在ngOnInit（）中以这样的形式传递数据，而不是在构造函数中传递数据：

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

删除空的验证方括号。

没有用于表单控件的值访问器，其名称为：＆＃39; rating＆＃39;在Angular 2 mat-dialog中与Reactive Froms

1 个答案: