如何在Angular 5中设置FormControl的默认值

Question

如果表中没有数据，我从服务中获取的是未定义的值，但在这种情况下我想在表单控件中显示默认值。如果有数据，则正常工作...请帮助我并建议我需要做什么。

- Amit Shaw

---

你是使用Subject或BehaviorSubject来监听数据变化的吗？ - Adrian Sawicki

@AdrianSawicki 是的，我正在使用BehaviorSubject。 - Amit Shaw

你可以传递默认值，或者就像其他人写的那样，将其添加到你的FormBuilder中。 - Adrian Sawicki

Answer 1

当您创建组和其中的控件时，您还可以对其进行初始化。 fb 是 FormBuilder。

fb.group({
   yourControl: [0, Validators.required] // '0' is the default value
});

- Suren Srapyan

---

Validators 不应该被包裹在另一个数组中吗？ - P.S.

如果您只使用一个验证器，则不需要，但如果您有多个验证器，则需要将它们放入另一个数组中，例如[0，[Validators.required，Validators.email]]。 - Suren Srapyan

感谢澄清。 - P.S.

从Angular 6开始，我认为您需要使用Validators.compose([...])，否则您可能会遇到验证问题（或者只是我这样，但你永远不知道）。而且表单控件并不总是表单组，您应该在答案中包括一个表单控件的创建（this.control = new FormControl('default value')）。 - user4676340

我非常喜欢这种回答。简短、精确而准确。谢谢。 - Vibhor Dube

现已弃用。 - Martin Eckleben

Answer 2

您可以尝试在表单控件中使用默认值。

myForm: FormGroup;
ngOnInit() {
    this.myForm = this.fb.group({
        name: ["test", [Validators.required, Validators.maxLength(30)]],
        address: this.fb.group({
            pin: ["123456", Validators.required]
        })
    });
}

- Krishna Rathore

---

已弃用。 - Martin Eckleben

@MartinEckleben 他们被弃用了，有什么替代品？ - Qasim

@Qasim 他们改变了group()方法的签名。这里不方便张贴代码 - 最好自己查看 https://angular.io/api/forms/FormBuilder - Martin Eckleben

Answer 3

使用FormControl构造函数：

myFormGroup = new FormGroup({
    mycontrol: new FormControl('myDefaultValue'),
});

文档来源：Angular.io - 初始化表单控件

- Samuel Diogo