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 组件内。实际上它是嵌套组件。
我的错误 在此处输入图像描述
解决方案
推荐阅读
- spring-boot - Spring Security LDAP 服务器连接不是“127.0.0.1”
- .net - 使用 ClrMD 获取 minidump 文件中对象的属性值
- java - 如何通过带有 nativeQuery 的 EclipseLink 调用带有日期参数的 Oracle 函数?
- wpf - 将 Prism 记录器连接到我自己的记录器的最佳方法
- git - 拆分 Git 存储库并仅保留剩余文件的历史记录
- node.js - 从 ng 提供应用程序后的 ERR_CONNECTION_RESET
- oracle - Oracle 查询查找记录的处理时间超过 24 小时
- excel - 可用于调用工作簿插件的选项
- database - 在 mongodb 中查找重复的 url
- html - Eclipse 请求 node.js