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

Question

I have a service with a FormGroup named mainForm-

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;
    }
}

In a component I use this service-

 constructor(public depositFormDataService: DepositFormDataService) {}

HTML:

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

When the user writes "b" for example I see in the debug a difference if I look on the FormGroup depositFormDataService.mainForm:

in: Controls --> title --> value = b

in: value --> title --> null

Why?

I found this post in git- https://github.com/angular/angular/issues/13792

I tries to do this hack in the component-

ngOnInit() {
    this.onChanges();
}

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

But it did not work and the value was still "null".

Any idea how to make the value be sync with the value inside the controls?

It causes a strange problem that depositFormDataService.mainForm.status differs from the depositFormDataService.title.status.

Answer 1

我认为在HTML中，您应该使用formControlName而不是formcontrol，如下所示：

<input  formControlName="title" matInput >