我正在尝试使用有角材质制作弹出表单,但遇到一些错误

时间:2019-02-03 04:11:01

标签: angular

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组件内部。实际上,它是嵌套的组件。

我的错误 enter image description here

0 个答案:

没有答案