为什么我的表格发送不正确?[(ngModel)]vs发送表单-Angular2+

Question

我有一个要发送的登录屏幕表单。

由于我将表单本身传递到后端，因此我更改了实现以停止绑定到输入[(ngModel(]。。。这通过了我最初编写的测试，但现在实际的应用程序实现不再有效。。。

有人能解释一下这里出了什么问题吗？我发布的代码只是一个易于理解的示例，因为我的代码要详细得多。

之前

---

应用程序

username: string;
onSubmit(form: NgForm) {
if (form.valid) {
// do something with this.username...
// this.username will be set to whatever is entered in the input box as it is bound with [(ngModel)]
}
}

app.html

<input class="form-control" id="username" name="username" type="text" autofocus required
placeholder="username" [(ngModel)]="username"/>

之后

---

应用程序

username: string;
onSubmit(form: NgForm) {
this.username = form.value.username
if (form.valid) {
// do something with this.username...
// this.username should now be what is passed via the form
}
}

app.html现在不再有[(ngModel(]="username">

<input class="form-control" id="username" name="username" type="text" autofocus required
placeholder="username"/>

Answer 1

您的输入需要绑定。你可以用反应形式：

应用

import {FormControl} from "@angular/forms";
...
usernameCtrl = new FormControl();
onSubmit()
{
if(this.usernameCtrl.valid)
{
// do something
}
}

app.html

<input ... [formControl]="usernameCtrl" />

编辑

NgModel&NgControl：在angular2中使用ng模型和ng控制之间的区别？

他们说：

控件负责获取有关表单状态或特定输入(有效、原始、触摸等(的提示。它通常用于显示验证错误(如果有的话(。

我认为比FormControl更好的解决方案是FormGroup(如果您有多个输入(：

应用

import {FormBuilder, FormGroup} from "@angular/forms";
...
//decorator
export class SomeClass implements OnInit
{
public reactiveForm = new FormGroup();
constructor(private fb: FormBuilder){}
public ngOnInit()
{
this.reactiveForm = this.fb.group({username: [""]});
}
public onSubmit()
{
if(this.reactiveForm.valid)
{
const raw = this.reactiveForm.getRawValue(); //output -> { username: "blabla"}
// do something with raw
}
}
}

app.html

<form [formGroup]="reactiveForm">
<input ... formControlName="usernameCtrl" name="usernameCtrl"/>    
<button [disabled]="!reactiveForm.valid">Submit</button>
</form>