如果表单无效,Angular2将禁用提交按钮

时间:2017-08-03 14:58:59

标签: forms angular submit

当我的表单在Angular2中无效时,如何禁用提交按钮?

现在我使用代码:

<input type="submit" [disabled]="!registrationForm.valid" value="Zarejestruj">

并且这不起作用并且表单总是被禁用,当它有效时也是如此。

有什么建议吗?

更新:

我发现错误,表单中有文件输入,导致表单按钮失败。这是我的整个代码(没有验证提示)

<div class="form">
    <form [formGroup]="registrationForm" (ngSubmit)="RegisterUser(registrationForm.value)" novalidate>
        <div class="form-row">
            <input type="text" name="login" placeholder="Nazwa użytkownika" [formControl]="registrationForm.controls['login']">
        </div>
        <div class="form-row">
            <input type="password" name="password" placeholder="Hasło" [formControl]="registrationForm.controls['password']" validateEqual="repeatPassword" reverse="true">
        </div>
        <div class="form-row">
            <input type="password" name="repeatPassword" placeholder="Powtórz hasło" [formControl]="registrationForm.controls['repeatPassword']" validateEqual="password">
        </div>
        <div class="form-row">
            <input type="file" name="avatar" file-model="avatar" [formControl]="registrationForm.controls['avatar']" >
        </div>
        <div class="form-row submit">
            <input type="submit" [disabled]="!registrationForm.valid" value="Zarejestruj">
        </div>
    </form>
</div>

并且registration.component.ts:

/ Imports
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  templateUrl: './app/registration/registration.component.html'
})
// Component class implementing OnInit
export class RegistrationComponent {

registrationForm : FormGroup;

  constructor(fb: FormBuilder){
    this.registrationForm = fb.group({
      'login' : [null, Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(12)])],
      'password' : [null, Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(20)])],
      'repeatPassword':  [null, Validators.required],
      'avatar': [null, Validators.required],
    })
  }

  RegisterUser(value: any){
    console.log(value);
  }
}

现在问题是:为什么这不起作用?

0 个答案:

没有答案