Question

我尝试了其他解决方案，例如修复表单引用，但这并没有帮助我。这是我的登录表格

    <form [formGroup]="longinForm" (ngSubmit)="onSubmit()">
    <h1>Login Form</h1>

      <div class="form-group" >
        <label for="name" >Username</label>
        <input type="text" name ="user" [(ngModel)]="loginuserdata.user" 
 #user="ngModel" 
        class="form-control" required >
        <div *ngIf="submitted">
        <div [hidden]="user.valid || user.pristine" class="alert alert-danger">
          Username is required
        </div>
        </div>
      </div>

      <div class="form-group" >
        <label for="pass" >Password</label>
        <input type="text" name="pass" [(ngModel)]="loginuserdata.pass" #pass="ngModel"
        class="form-control"  required >
        <div *ngIf="submitted">
        <div [hidden]="pass.valid || pass.pristine" class="alert alert-danger">
            Password is required
        </div>
        </div>
      </div>
      <button type="submit" class="btn btn-success">Submit</button>
    </form>

这也是我的登录组件

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { LoginService } from './login.service';
import { ILoginData } from './login-data';

@Component({
  selector: 'app-loginform',
  templateUrl: './loginform.component.html',
  styleUrls: ['./loginform.component.css']
})
export class LoginformComponent implements OnInit {

  loginForm:FormGroup;
  loginuserdata : any[] = [];
  error:string;

  submitted=false;

  constructor(private route: Router,private service:LoginService) { }

  get f(){return this.loginForm.controls;}

  ngOnInit() {
    this.onSubmit();
  }

  onSubmit(){

    if(this.loginForm.invalid){return;}//form invalid stop here
    //form is valid do something
    this.submitted=true;
    if(this.f.user.value == "Admin" && this.f.pass.value == "Apassword"){
    this.service.getAdmin()
    .subscribe(data => this.loginuserdata = data)
              this.route.navigateByUrl('admin');
              err => this.error = err;
              console.log(this.error);
    }

  }

}

如果你们需要查看我的代码的其他任何部分，请告诉我，请帮助我，我尝试了类似于解决此问题的方法，但对我而言不起作用。

Answer 1

您需要构建表单控件，已定义它，但需要类似以下内容的东西。您需要初始化表单组。

import wx

app = wx.App()
frame = wx.Frame(None, style = wx.DEFAULT_FRAME_STYLE & ~(wx.RESIZE_BORDER | wx.MAXIMIZE_BOX))
frame.Show()
app.MainLoop()

在这里您可以定义表单组的控件和验证器。（此示例仅表明每个值都必须具有一个值才能生效。该值应内置在import { NgForm, FormGroup, FormBuilder } from '@angular/forms'; //Be sure to import formBuilder and inject through constructor. This will allow you //to manage how you will build the form and add validation. //Its a helper class provided by Angular to help us explicitly declare forms. constructor( private formBuilder: FormBuilder ){} public ngOnInit(): void { this.loginForm = this.formBuilder.group({ username: ['', Validators.required], password: ['', Validators.required] });中。

然后，您可以在模板中删除ngOnInit并使其如下所示。当您需要访问输入时，输入值将保留在控件中。

[(ngModel)]

以上将作为登录用户名/电子邮件的示例。另外，如评论中所述，您在HTML表单中有一个错字。

当您尝试访问from组的<form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> <input type="text" name ="user" [formControlName]="'username'" class="form-control" required> <form>和valid属性时，这应该有效。如有任何问题，请发表评论。

Here is the Angular documentation for reactive forms。

Answer 2

您如何做到这一点。

ngAfterViewInit() { this.onSubmit() }

我认为ngOninit尚未定义它。检查生命周期。

我收到以下错误：错误TypeError：无法读取未定义的属性'invalid'

2 个答案: