Угловой реактив от после программной установки значения, форма остается в том же состоянии до конца функции

Question

Угловой реактивный от после программной установки значения, форма остается в том же состоянии до конца функции, я не понимаю этого:

 export class NewComponent {

   constructor(
      private fb: FormBuilder
   ){
   }

   profileForm = this.fb.group({
     name: ['', Validators.required]
   });


   onButtonClick(){
     this.profileForm.controls.topic.setValue('bla bla', {onlySelf: true});
     console.log(this.profileForm);
   }
 }

// FormGroup {validator: null, asyncValidator: null, _onCollectionChange: ƒ, pristine: true, touched: false, …}
// asyncValidator: null
// controls: {topic: FormControl, hidden: FormControl, title: FormControl, language: FormControl, description: FormControl, …}
// errors: null
// pristine: true
// status: "INVALID"
// statusChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
// touched: false
// validator: null
// value: {title: ""}
// valueChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
// _onCollectionChange: () => this._updateDomValue()
// _onDisabledChange: []
// dirty: (...)
// disabled: (...)
// enabled: (...)
// invalid: (...)
// parent: (...)
// pending: (...)
// root: (...)
// untouched: (...)
// updateOn: (...)
// valid: (...)
// __proto__: AbstractControl  

Как вы можете видеть, "значение" по-прежнему имеет{title: ""} controls.title.value действительно изменилось, но не изменило значение.

Как сохранить изменения?это "push ()" в некотором роде?почему значение не установлено и как мне правильно установить его?

потому что, когда вы вводите в поле формы, объект «значение» также обновляется, и именно этот вы используете для обращения к состоянию и больше подходит для вариантов использования геттера.

Answer 1

Если вы присмотритесь, разница будет onlySelf.Значение формы не обновляется, когда мы устанавливаем свойство true, но значение элемента управления обновляется, как и ожидалось.

Я продемонстрировал поведение в следующем фрагменте.

this.surveyForm.controls.surveyTitle.setValue('without self');
console.log('Control value: ', this.surveyForm.controls.surveyTitle.value);
console.log('Form value: ', this.surveyForm.value);
console.log('-------------------');
this.surveyForm.controls.surveyTitle.setValue('with self', {onlySelf: true});
console.log('Control value: ', this.surveyForm.controls.surveyTitle.value);
console.log('Form value: ', this.surveyForm.value);

Здесьэто выход-

Answer 2

Хорошо, это то, что

• это https://github.com/angular/angular/pull/10537
• это https://angular.io/guide/reactive-forms#replacing-a-form-control-value
• и это https://ultimatecourses.com/blog/angular-2-form-controls-patch-value-set-value#setValue

все как-то пропустить ...

это:

    this.profileForm.controls.name.setValue('bla bla', {onlySelf: true});

меняет только элементы управления,

это:

    this.profileForm.patchValue({'name': 'bla bla'});

меняет как элементы управления, так и значение.

, но как-то setValue должен быть "чище" ...

Сейчас я собираюсь использовать последнее отдельно, но я бы хотелхотел бы знать, каковы преимущества / недостатки использования обоих в сочетании, когда вы хотите программно изменить форму?