使用 ReactiveForms，如何在 HTML angular 中设置值 6

Question

我正在尝试为我的 HTML 设置一个值。我如何实现这一目标？我在我的打字稿上使用反应形式，并且已经在我的 HTML 中尝试过 [value]= "coursemodules.course.id" 但它似乎不起作用。当我 console.log() 它时它不会检索它。

component.ts

@Input() coursemodules: any = []

moduleForm = new FormGroup({
  class_id: new FormControl(''),
  coursemodule_title: new FormControl(''),
  coursemodule_course_id: new FormControl('')
});

constructor(private coursemoduleService: CoursemoduleapiService) {}

ngOnInit() {}

saveModuleForm() {
  console.log(this.moduleForm.value);
  this.coursemoduleService.createCourseModules(
    this.moduleForm.get('class_id').value,
    this.moduleForm.get('coursemodule_title').value,
    this.moduleForm.get('coursemodule_course_id').value).subscribe(
      result => console.log(result),
      error => console.log(error)
    );
}

HTML

<form [formGroup]="moduleForm" (ngSubmit)="saveModuleForm()">

    <div class="modal-body m-3">

        <div class="form-group">
            <label class="form-label">Class ID</label>
            <input formControlName="class_id" type="text" 
                   class="form-control"
                   placeholder="Class ID">
        </div>
        <div class="form-group">
            <label class="form-label">Module Title</label>
            <input formControlName="coursemodule_title" type="text" 
                   class="form-control" 
                   placeholder="Module Title">
        </div>
        <div class="form-group">
            <label class="form-label">Course ID</label>
            <input formControlName="coursemodule_course_id" type="text" 
                   class="form-control"
                   [value]="coursemodules.course.id">
        </div>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-success">Save changes</button>
    </div>
</form>

Answer 1

您可以使用 formname.setValue({})

Answer 2

我建议您删除 [value]="coursemodules.course.id"，因为它不适用于反应式表单。它可能会显示在表单中，但是反应式表单会为表单维护自己的 state/values 并且通过使用 [value] 可以绕过它。如果您希望为表单字段分配初始值，您必须在控制器中而不是在模板中执行此操作。

ngOnInit() {
    this.moduleForm.get('coursemodule_course_id').setValue(this.coursemodules.course.id)
}

Answer 3

如果您知道 coursemodules 将在 OnInit 准备就绪，您可以这样做：

ngOnInit() {
    this.moduleForm.patchValue({
        coursemodule_course_id: this.coursemodules[0].course.id
    })
}

或者，钩入 ngOnChanges

ngOnChanges(changes: SimpleChanges): void {
    if (changes.coursemodules && changes.coursemodules.currentValue) {
        ...same as ngOnInit
    }
}

做的时候要注意

class_id: new FormControl('')

您正在提供控制值 ''。你可以做 class_id: new FormControl(6) 等等

不要将 [value] 与 formControlName 一起使用，除非您知道自己在做什么

不要使用 any 类型。创建接口，例如 interface CourseModule 然后：

@Input() coursemodules: CourseModule[] = []

这将在尝试 this.coursemodules.course.id 时正确出错。

使用 ReactiveForms，如何在 HTML angular 中设置值 6

Using ReactiveForms, how to set value in HTML angular 6

angular

angular-reactive-forms

angular6