angular - 返回错误类型错误的角度反应形式:“_co.blogTitle 未定义”
问题描述
我正在尝试在 Angular 中创建一个反应式表单,但是在浏览器上加载页面时它返回两个错误ERROR TypeError: "_co.createBlogForm.form is undefined"和ERROR TypeError: "_co.blogTitle is undefined"在控制台上. 在组件内部,我使用 formControlName 声明了所有变量,并将 FormGroup 与表单名称绑定。请看下面我的代码:
.html 文件:
<div class="blog-form">
<form [formGroup]="createBlogForm" (ngSubmit)="createBlog()">
<div class="form-group form-row">
<label>Blog Title</label>
<input type="text" formControlName="blogTitle" class="form-control" placeholder="Enter blog Title"
required>
</div>
<div [hidden]="blogTitle.valid || blogTitle.pristine" class="alert alert-danger">
Blog Title is required
</div>
<div class="form-group form-row">
<label class="col-md-3">Upload Image</label>
<div class="col-md-9">
<input type="file" id="imagePath" (change)="onSelectedFile($event)" />
<div [innerHTML]="uploadError" class="error"></div>
</div>
</div>
<div class="form-group">
<label>Description</label>
<input type="text" formControlName="blogDescription" class="form-control" placeholder="Enter Description"
required>
</div>
<div class="form-group">
<label>Enter the blog body</label>
<textarea formControlName="blogBodyHtml" class="form-control" rows="3" required></textarea>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" formControlName="blogAuthor" class="form-control" placeholder="Enter Author name"
required>
</div>
<div class="form-group">
<label>Category</label>
<select formControlName="blogCategory" class="form-control" id="category" required>
<option *ngFor="let category of possibleCategories" [value]="category">{{category}}</option>
</select>
</div>
<button type="submit" class="btn btn-default" [disabled]="!createBlogForm.form.valid">Post the blog</button>
</form>
</div>
角组件
public createBlogForm: FormGroup;
public imagePath: string;
public blogTitle: string;
public blogBodyHtml: string;
public blogDescription: string;
public blogCategory: string;
public blogAuthor: string;
public possibleCategories = ["Comedy", "Action", "Drama", "Technology","Cooking","Travel"];
constructor(private blogpostService: BlogpostService, private toastr: ToastrManager, private router: Router,
private _http: HttpClient, private formBuilder: FormBuilder) {
console.log('CreateBlogComponent component constructor called');
}
ngOnInit() {
console.log("CreateBlogComponent onInIt called");
this.createBlogForm = this.formBuilder.group({
blogTitle: [''],
blogDescription: [''],
blogBodyHtml: [''],
blogCategory: [''],
blogAuthor: [''],
imagePath:['']
})
}
onSelectedFile(event) {
const file = event.target.files[0];
this.createBlogForm.get('imagePath').setValue(file)
}
public createBlog(): any {
const formData = new FormData();
formData.append('imagePath', this.createBlogForm.get('imagePath').value);
formData.append('title', this.createBlogForm.get('blogTitle').value);
formData.append('description', this.createBlogForm.get('blogDescription').value);
formData.append('blogBody', this.createBlogForm.get('blogBodyHtml').value);
formData.append('category', this.createBlogForm.get('blogCategory').value);
formData.append('author', this.createBlogForm.get('blogAuthor').value);
}
this.blogpostService.createBlog(formData).subscribe(
data => {
this.toastr.successToastr('Blog Posted Susseccfully!', 'Success!');
},
}
解决方案
您的 FormBuilder 属性尚未初始化。
<div class="blog-form" *ngIf="createBlogForm">
</div>
推荐阅读
- ruby - bundle install 应该在哪里执行?
- python - 用pyinstaller转成exe后无法导入模块
- php - 检查数组 1 的值是否存在于数组 2 的键中 - PHP
- amazon-web-services - 来自 Heroku 的 AWS CloudWatch 多行日志消息
- sql - 在 sql 中使用 Select 插入
- android - 在 android studio 的聊天应用中显示消息时出错
- python - 任何人都可以帮助我进行合并,如熊猫中所示的输出。我尝试了很多次但无法做到
- c# - 如何在不明确检查 C# 中的类型的情况下自动将对象转换为其具体类型?
- python - 根据列中的字符串合并 DataFrames 列表,然后将其转换为字典
- java - Android:值在插入房间数据库之前被转换为 0 或 1