代码之家 › 专栏 › 技术社区 › physicsboy

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

typescript angular javascript

1

physicsboy · 技术社区 · 7 年前

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

由于我正在将表单本身传递到后端,因此我已经更改了实现以停止绑定到输入[(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)]
  }
}

应用程序.html

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

之后

应用程序ts

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

应用程序.html 现在不再有[(ngModel)]=“用户名”

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

1 回复 | 直到 7 年前

1

2

Mateusz Klimentowicz 7 年前

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

应用程序ts

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

...
usernameCtrl = new FormControl();

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

应用程序.html

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

编辑

NgModel&NgControl的区别: Difference between using ng-model and ng-control in angular2?

他们说:

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

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

应用程序ts

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

应用程序.html

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