Проверка вложенной формы Angular Material 2 при отправке

Я пытаюсь использовать Angular Material с formGroup в Angular 2, и у меня проблема с проверкой ввода для вложенных formControls в разных компонентах.

Моя проблема: при отправке формы только вход в первой formGroup получает уведомление о том, что форма была отправлена.

Я создал следующий пример:

 @Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
  public myForm: FormGroup;

  constructor(private _fb: FormBuilder) {}

    ngOnInit() {
    this.myForm = this._fb.group({
      nested: this._fb.group({
           id: ['', Validators.required]
      }),
      id: ['', Validators.required],
    });
  }
}

У меня есть простая formGroup с одним вложенным formController. Это мой HTML:

<form [formGroup]="myForm">
  <md-input-container>
    <input mdInput required formControlName="id">
  </md-input-container>
  <other-component [myFormGroup]="myForm" myFormGroupName="nested"></other-component>
  <button md-raised-button type="submit">Rechercher</button>
</form>

Другой компонент просто отображает другой ввод.

Я сделал плункер для иллюстрации: http://plnkr.co/edit/WR0cmVOhIfCdkqAVc8xX

Вы можете заметить, что если я ввожу поле и сразу выхожу из него, на обоих входах появляется красная строка ошибки. Но если я не коснусь ни одного из двух входов и нажму «Отправить», подчеркнут только невложенные входные данные. Это связано с тем, что вложенный не получает информацию о том, что форма была отправлена, даже если я передаю объект formGroup в качестве параметра.

Есть идеи, как я могу решить эту проблему? Как я могу сделать первый ввод информации о представленной форме?

Большое спасибо !


angular validation input angular2-forms angular-material2
person Alexis L    schedule 03.08.2017    source источник
comment
В вашем plunkr, если я нажимаю кнопку «Отправить» и ничего больше, я вижу оба ввода, подчеркнутые красным.   -  person ChrisG    schedule 03.08.2017
comment
По мне, плункер не компилируется, и код отличается от вашего вопроса ...   -  person AJT82    schedule 03.08.2017
comment
Да, извините, я обновил свой plunkr, так как мой пример действительно работал. Новый plunkr иллюстрирует мою проблему, проверка отправки не работает в случае вложенных компонентов   -  person Alexis L    schedule 03.08.2017

Ответы (1)


arrow_upward
2
arrow_downward

Angular не добавляет класс mat-input-invalid к вашему вложенному элементу управления. Давайте подумаем почему?

Вот как выглядит привязка класса для MdInputContainer:

'[class.mat-input-invalid]': '_mdInputChild._isErrorState',

и вот соответствующий стиль, который делает вашу границу красной.

.mat-input-invalid .mat-input-ripple {
    background-color: #f44336; // red
}

если вы исследуете, как рассчитывается свойство _isErrorState, вы можете заметить, что он проверяет свойство FormGroupDirective.submitted.

function defaultErrorStateMatcher(control, form) {
    var /** @type {?} */ isSubmitted = form && form.submitted; <----
    return !!(control.invalid && (control.touched || isSubmitted));
}

Поскольку вы создаете две директивы FormGroupDirective, будет отправлена ​​только директива верхнего уровня.

Вы можете обойти это, используя реактивный FormControlDirective

other.component.ts

@Component({
  selector: 'other-component',
  template: `
      <md-input-container >
        <input mdInput required [formControl]="control">
      </md-input-container>
  `
})
export class OtherComponent  {
  @Input() subname: string;
  @Input() formobj: any;

  control: FormControl;

  ngOnInit() {
    this.control = this.formobj.get([this.subname, 'id'])
  }
}

Пример Plunker

person yurzui    schedule 03.08.2017
comment
Спасибо Юрзуй, это именно то, что я искал. Дело в том, что мне нужно передать весь объект FormGroup моим вложенным компонентам, а не передавать только суб-объект FormGroup. Сначала я напрямую передавал myForm.get ('nested') в качестве параметра другого моего компонента, но нет, моим вложенным компонентам нужна ссылка на весь объект formGroup. - person Alexis L; 04.08.2017