Javascript 为什么我的表格发送不正确？[（ngModel）]vs发送表单-Angular2+；

我有一个表格，我正在发送一个登录屏幕

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

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

之前

---

应用程序ts

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)]
  }
}

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

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

app.html现在不再有[（ngModel）]=“用户名”

---

您的输入需要绑定。您可以使用反应式表单：

app.ts

import {FormControl} from "@angular/forms";

...
usernameCtrl = new FormControl();

onSubmit()
{
    if(this.usernameCtrl.valid)
    {
        // do something
    }
}

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

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

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

app.html

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

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

提交

为什么它需要绑定？用户名的值肯定会与表单本身一起传递吗？为什么我不能从中提取值？您描述的

[formControl]

方法与使用

[（ngModel）]

避免使用ngModel的原因是什么？这正是它的目的。。。Angular中没有自动绑定表单元素，因此您需要以某种方式将输入绑定到相关属性。ngModel是实现这一点的正常方式。