Angular ngForm 未定义

Question

我试图使用 ngOnInit 获取值并将表单初始化为默认值，但表单未定义。我也尝试使用 patchValue 但它不起作用，因为表单未定义。类似的代码在另一个组件中工作，但由于某种原因，这里的表单未定义。我对 angular 比较陌生，所以详细的解释会很有帮助。这是我的打字稿代码：

export class RecipeEditComponent implements OnInit {
  @ViewChild("recipeForm",{static: false}) recipeForm: NgForm;

  id: number;
  recipe: Recipe;
  editMode = false;

  constructor(
    private route: ActivatedRoute,
    private recipeService: RecipeService
  ) {}

  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.id = +params["id"];
      this.recipe = this.recipeService.getRecipe(this.id);
      this.editMode = params['id'] != null;
      this.initForm()
    });
  }

  initForm(){
    if(this.editMode){
      // this.recipeForm.setValue({
      //   name: "abc",
      //   imagePath: "abc",
      //   description: "abc"
      // })
      console.log(this.recipeForm)
    }
  }
 updateRecipeInfo(form: NgForm) {
    // const newRecipe= new Recipe(values.name, values.imagePath, values.description, this.recipe.ingredients)
    // this.recipeService.updateRecipe(this.id, this.recipe)
    console.log(form)
  }
    
    }

这是我的 html 代码：

<form (ngSubmit)="updateRecipeInfo(recipeForm)" #recipeForm="ngForm">
    <div class="form-group">
      <label for="name">Name</label>
      <input
        id="name"
        class="form-control"
        name="name"
        ngModel
        required
      />
    </div>
    <div>
      <label for="imagePath">Image URL</label>
      <input
        id="imagePath"
        class="form-control"
        name="imagePath"
        ngModel
        required
      />
    </div>
    <div>
      <label for="description">Description</label>
      <textarea
        id="description"
        class="form-control"
        required
        name="description"
        ngModel
        required
      ></textarea>
    </div>
    <div class="align-right-row">
      <button type="submit" class="btn btn-info">Save</button>
      <button type="button" class="btn btn-secondary">Cancel</button>
    </div>
  </form>

Answer 1

尝试将 setValue 包裹在 setTimeout 中，如下所示。

initForm(){
    if(this.editMode){
        setTimeout(() => {
            this.recipeForm.setValue({
                name: "abc",
                imagePath: "abc",
                description: "abc"
            })
            console.log(this.recipeForm);
        }, 0);
    }
}

这将强制表单进入上下文，然后您可以使用初始值设置值。

提交表单应该会显示您在更改后输入到表单中的值。

Answer 2

在这里，您从 ngOnInit 调用 recipeForm 的 setValue，但使用选项 {static: false} 作为 @ViewChild 参考。使用 {static: false} 引用的 @ViewChild 元素只能在 AfterViewInit 之后引用。这可能有帮助：

Answer 3

如果它不适用于 ngInInit()，则在 ngAfterviewInit() 方法中像这样使用它。

试试这个

` @ViewChild('yourForm', { static: false }) yourForm: NgForm;

@ViewChildren('yourForm') yourForm: NgForm; `

ngAfterviewInit() {
  console.log(this.yourForm)

}

这会给你 ngForm，你可以像 valuchanges 一样玩弄它等等。

Angular ngForm 未定义

Angular ngForm giving undefined

html

angular

angular-forms