表单验证程序未通过Angular 2

我使用表单验证器通过表单构建器在Angular 2中创建表单。表单验证程序未通过Angular 2

每当我在文本框中输入数据 - 它通过（div轮廓颜色变绿）。

当我用数据加载表单时，文本框有一个红色的轮廓 - 即使它们被填充文本。

HTML：

<div class="form-group row" [ngClass]="{'has-error': (!firstname.valid), 'has-success': (firstname.valid)}"> 
     <label for="firstname" class="col-sm-2 control-label">First Name</label> 
     <div class="col-sm-10"> 
      <input [formControl]="firstname" type="text" class="form-control" id="firstname" placeholder="First Name" value="{{profile.firstname}}"> 
     </div> 
    </div>

在组件文件：

@Input() profile: Profile; 

public form: FormGroup; 
public firstname: AbstractControl; 
public lastname: AbstractControl; 


    constructor(fb: FormBuilder) { 
    this.form = fb.group({ 
     'firstname': ['', Validators.compose([Validators.required, Validators.minLength(4)])], 
     'lastname': ['', Validators.compose([Validators.required, Validators.minLength(4)])], 
     'jobtitle': ['', Validators.compose([Validators.required, Validators.minLength(4)])], 
     'department': ['', Validators.compose([Validators.required, Validators.minLength(4)])] 
    }); 

    this.firstname = this.form.controls['firstname']; 
    this.lastname = this.form.controls['lastname']; 
    this.jobtitle = this.form.controls['jobtitle']; 
    this.department = this.form.controls['department']; 
}

为什么验证未通过，则Validators.required不正确的？

感谢。

来源

2016-07-16 thegunner

你的代码似乎罚款，你能否pulnker重建问题了吗？ –

将需要我一段时间才能得到。似乎“有错误”类设置为早。 class =“form-group row has-error” – thegunner

因此，这意味着你得到你的解决方案？ –

我看到你正在使用模型驱动的形式，为什么不采用模型驱动的方式设定初始值：

'firstname': [profile.firstname, Validators.compose([Validators.required, Validators.minLength(4)])]

如果你没有在转接过程中，初始化阶段，真正的数据需要一些时间，使用后更新：

this.firstname.updateValue(this.profile.firstname);

工作plnkr：http://plnkr.co/edit/UgsYOu04H0Y4kxGYwhAl?p=preview

来源

2016-07-17 01:34:04

表单验证程序未通过Angular 2

回答

相关问题