Question

我正在尝试在Angular中创建一个反应形式，但是在浏览器中加载页面时，它返回两个错误 ERROR TypeError：“ _ co.createBlogForm.form未定义” 和错误TypeError：“ _ co.blogTitle未定义” 。在组件内部，我已经用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!');


    },

}

Answer 1

您的FormBuilder属性尚未初始化。

func (s *Service) GetUser(email, name string) (*Users, error) {
    c := db.NewClient()
    defer db.Close()
    var u Users
    var filter string

    if email != "" && mobileNumber != "" {
      filter = fmt.Sprintf(`eq(email, "%s") OR eq(mobileNumber, "%s")`, email, mobileNumber)
    } else if email != "" && mobileNumber == "" {
      filter = fmt.Sprintf(`eq(email, "%s")`, email)
    } else if email == "" && mobileNumber != "" {
      filter = fmt.Sprintf(`eq(mobileNumber, "%s")`, mobileNumber)
    }

    q := fmt.Sprintf(`query findOne() {
        users(func: type("user")) @filter(%s) {
            name
            email
            home_address
            contact_number
        }
    }`, filter)
    ctx := context.Background()
    res, err := c.NewTxn().Query(ctx, q)
    if err != nil {
        return nil, err
    }
    if err = json.Unmarshal(res.Json, &u); err != nil {
        return nil, err
    }
    return &u, nil
}

Answer 2

以下代码引用了未初始化的blogTitle属性。

  <div [hidden]="blogTitle.valid || blogTitle.pristine" class="alert alert-danger">
       Blog Title is required 
  </div>

似乎它尝试访问表单控件而不是属性。为此，您需要将blogTitle属性转换为此：

public get blogTitle() {
 return this.createBlogForm.get("blogTitle");
}

角反应形式返回错误TypeError：“ _ co.blogTitle未定义”

2 个答案: