angular - 角度反应形式在服务中返回未定义的值
问题描述
我正在尝试从反应式表单中获取一些数据并将其传递给服务实例。但相反,它向服务返回未定义的值。我试图控制台并获取服务中的值,但它在那里返回未定义。请看下面我的代码:
响应式表单的 HTML 代码:
</div>
<div class="blog-form" *ngIf="createBlogForm">
<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.valid">Post the blog</button>
</form>
</div>
角组件
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)
console.log(file)
}
public createBlog(): any {
//console.log(form.value)
const formData = new FormData();
//console.log('kk'+this.createBlogForm.get('imagePath').value);
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!');
},
error => {
console.log(error);
})
}
传递 formData 的服务文件,用于安慰它返回的值 undefined
public createBlog(formData): Observable<any> {
console.log(formData.title) //returning undefined
const params = new HttpParams()
.set('title', formData.title)
.set('description', formData.description)
.set('blogBody', formData.blogBody)
.set('category', formData.category)
.set('author', formData.author)
.set('imagePath', formData.imagePath)
let myResponse = this._http.post('http://localhost:4000/api/v1/blogs' + '/create?authToken=' + Cookie.get('authtoken'), params);
return myResponse;
}
解决方案
使用formData.get('title')
而不是formData.title
.
https://developer.mozilla.org/en-US/docs/Web/API/FormData/get
推荐阅读
- java - 登录 Spring MVC 应用程序时的自定义响应
- java - 带有类对象的未处理异常类型 ParseException
- typo3 - 带有 UserFunc 的 TYPO3 TCA 标签 - 如何获取 HTML 格式的标签?
- rust - 为什么 centos 在 dylib build 中包含额外的依赖项
- email - 为什么来自 web ui 和 python 代码的电子邮件内容彼此不同?
- elasticsearch - 高级 kibana / elasticsearch devtools 查询
- javascript - twilio 如何使用 PHP 和 JavaScript 从队列中选择呼叫
- python - 为python pandas中另一列中的每个唯一值的列表中每个元素的列添加行
- sql - 当您有 datetime2 列时在 SQL Server 中进行分组
- authentication - 如何使用我的 IdentityServer 自身的身份验证和授权?