Angular реактивная форма, возвращающая неопределенные значения в сервис - PullRequest
Новая
       43

Angular реактивная форма, возвращающая неопределенные значения в сервис

0 голосов
/ 20 января 2020

Я пытаюсь получить некоторые данные из реактивной формы и передать их экземпляру службы. Но вместо этого он возвращает неопределенные значения в сервис. Я пытался утешить и получить значения в сервисе, но там он возвращает неопределенное значение. Пожалуйста, посмотрите на мой код ниже:

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>

Angular Компонент 

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;

}

1 Ответ

1 голос
/ 20 января 2020

Используйте formData.get('title') вместо formData.title.

https://developer.mozilla.org/en-US/docs/Web/API/FormData/get

...