首页 > 解决方案 > 我正在尝试使用角度材料制作弹出表单,但遇到了一些错误

问题描述

post.component.html

<form [formGroup]="" (ngSubmit)="postForm.valid && onLogin()" novalidate>
  <div class="example-container">
    <mat-form-field appearance="outline">
      <mat-label>Title</mat-label>
      <input id="title"
            matInput 
            formControlName="title"
            [(ngModel)]="post.title" 
            placeholder="Enter your title"/>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Description</mat-label>
      <textarea id="description" 
            matInput 
            formControlName="description" 
            [(ngModel)]="post.description" 
            placeholder="What on your mind?">
      </textarea>
    </mat-form-field>

    <mat-toolbar-row>
      <span class="spacer"></span>
      <button (click)="onNoClick()" class="button-row" mat-stroked-button color="accent">Cancel</button> 
      <button (click)="onCreate()" mat-stroked-button color="accent" >Post</button> 
    </mat-toolbar-row> 
  </div>
</form>

实际上错误是指向第 3 行和第 12 行。下一个问题是 textarea 占位符不起作用

post.component.ts

export class PostComponent implements OnInit {

  post: PostModel = new PostModel();
  postForm: FormGroup;

  constructor(private formBuilder: FormBuilder,
              public dialogRef: MatDialogRef<PostComponent>) { }

  ngOnInit() {    
    this.postForm = this.formBuilder.group({
      'title':[this.post.title,[
        Validators.required
      ]],    
      'description':[this.post.description,[
        Validators.required,
        Validators.maxLength(1000)
      ]]
    });    
  }

  onNoClick(): void {
    this.dialogRef.close();
  }    
}

注意:post 组件在 home 组件内。实际上它是嵌套组件。

我的错误 在此处输入图像描述

标签: angular

解决方案


推荐阅读