каждый,
Я построил свою реактивную форму с 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 от родителя в дочернем элементе?