Reactive-Forms: валидатор FormControl из родительского в дочернем компоненте - PullRequest
0 голосов
/ 22 октября 2018

каждый,

Я построил свою реактивную форму с Angular 6.

Здесь я построил форму в моем ParentComponent с валидаторами:

@Component({
  selector: 'parent',
  template: '
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div formGroupName="address">
        <child formControlName="street"></child>
        <child formControlName="housenumber"></child>
        <child formControlName="city"></child>
    </div>
  </form>'
})

export class ParentComponent implements OnInit {

    public form: FormGroup;

  constructor(private formBuilder: FormBuilder) {
  }

  ngOnInit() {
    this.form = this.formBuilder.group({
      address: this.formBuilder.group({
        street: new FormControl(null,[Validators.minLength(1), Validators.maxLength(40), Validators.required]),
        housenumber: new FormControl(null,[Validators.pattern("[0-9]{7}", Validators.required]),
        city: new FormControl(null,[ Validators.required]),
      })
    });  
  }

  onSubmit(){
    log.console("submit");
  }
}

для вводаполя Я хочу сделать ChildComponent, который дает пользователю больше информации, и у меня нет одного и того же кода несколько раз.

@Component({
  selector: 'child',
  template: '
  <label>I´m a label</label>
  <input [(ngModel)]="_model"></input>
  {{_model.errors}}
  ',
   providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ChildComponent),
      multi: true
    }
  ]
})

export class ChildComponent implements ControlValueAccessor {

    _model;
    onChange: any = () => { };
  onTouched: any = () => { };

  constructor() {
  }

  get model() {
    return this._model;
  }

  set model(val) {
    this._model = val;
    this.onChange(val);
  }

  writeValue(value: any): void {
    if (value) {
      this._model = value;
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    throw new Error('Method not implemented.');
  }
}

Входное значение успешно передается в родительский компонент.Но как я могу проверить валидацию FormControl от родителя в дочернем элементе?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...