Question

我有一个名为mainForm-

的FormGroup服务。

export class DepositFormDataService{

  this.mainForm = this.formBuilder.group({
            title: ['', Validators.required],
            category: '',
            type: '',
            languages: this.formBuilder.array([]),
        });
    }

    get title(): FormControl{
        return this.mainForm.get('title') as FormControl;
    }
}

我在组件中使用此服务-

 constructor(public depositFormDataService: DepositFormDataService) {}

HTML：

 <input matInput [formControl]="depositFormDataService.title">

例如，当用户写“ b”时，如果在FormGroup depositFormDataService.mainForm上查看，在调试中会看到不同：

在：控件->标题-> value = b

in：值->标题->空

为什么？

我在git-中找到了此帖 https://github.com/angular/angular/issues/13792

我试图在组件中进行此破解-

ngOnInit() {
    this.onChanges();
}

onChanges(): void {
    this.depositFormDataService.title.valueChanges
        .pipe(takeUntil(this.titleDestroy))
        .subscribe(value => {
            this.depositFormDataService.mainForm.get('title').patchValue(value, {emitEvent: false});
}

但是它不起作用，并且值仍然为“ null”。

有什么主意如何使值与控件内的值同步？

depositingFormDataService.mainForm.status与depositFormDataService.title.status不同会引起一个奇怪的问题。

Answer 1

我认为在HTML中，您应该使用formControlName而不是像这样的formcontrol：

<input  formControlName="title" matInput >

Angular 5反应性表单-通过html更新formControl不会更新值，只有控件

1 个答案: