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