在Angular 6中,如果一个FormGroup提交时返回null,可能是因为没有正确绑定表单控件的值或者没有正确设置表单的校验规则。以下是一个可能的解决方法:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
}
onSubmit() {
if (this.myForm.valid) {
console.log(this.myForm.value); // 正确输出表单值
}
}
}
上述代码中,通过formControlName
属性将表单控件与FormGroup中的对应字段进行绑定。
this.myForm = this.fb.group({
username: ['', [Validators.required, Validators.minLength(6)]],
password: ['', Validators.required]
});
上述代码中,Validators.required
表示该字段为必填项,Validators.minLength(6)
表示该字段的最小长度为6个字符。
以上是一个基本的解决方法,如果仍然返回null,可能需要进一步检查代码是否存在其他问题,例如是否正确导入了FormsModule和ReactiveFormsModule模块等。