Валидаторы формы не проходят в 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? –

займет у меня некоторое время, чтобы получить это. Кажется, класс «has-error» установлен на ранний. 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

ответ

Смежные вопросы