Explain what syntax means in TypeScript, when inside parentheses (opts: {onlySelf?: boolean} = {}) what happens in this area when I cannot understand how, here we create an untitled object with one boolean variable inside? What is the advantage of this approach? Why not make it easier and use a variable?

  markAsTouched(opts: {onlySelf?: boolean} = {}): void { (this as{touched: boolean}).touched = true; if (this._parent && !opts.onlySelf) { this._parent.markAsTouched(opts); } } 
  • Because it is now in the function uses a single option. And after six months of development, they may already be a couple of dozen. - Yaant
  • @Yaant, this is where and if this is just the default settings? - overthesanity
  • @overthesanity Yes, but a person asks why an object with a single field is needed for this. - Yaant

1 answer 1

I will answer your question. Почему не сделать проще и использовать переменную? as follows - { onlySelf?: boolean } is a unique parameter, parameters can be passed to different FormGroup and FormControl , but in fact we use AbstractControl methods, because everything from this class is inherited. Imagine this kind of form:

 public form = new FormGroup({ name: new FormControl('Артур', { validators: [ Validators.required ] }), lastName: new FormControl('Фамилия', { validators: [ Validators.required ] }) }); 

Now the form is valid:

 log(this.form.valid === true); // true 

If we change the value of some control to null :

 this.form.get('name') !.setValue(null); 

That form will naturally become invalid:

 log(this.form.invalid === true); // true 

If you use the onlySelf parameter:

 this.form.get('name') !.setValue(null, { onlySelf: true }); 

That will change the validity of only the control, but not the form itself:

 log(this.form.valid === true); // true log(this.form.get('name') !.invalid === true); // true 

setValue accepts other properties in the options object:

 setValue(value: any, options: { onlySelf?: boolean, emitEvent?: boolean, emitModelToViewChange?: boolean, emitViewToModelChange?: boolean } = {}): void 

This options parameter is passed down the chain, because the FormGroup is a tree, as well as with the markAsTouched method, setValue calls the updateValueAndValidity method where it passes options , updateValueAndValidity in turn checks the value for validity and calls markAsTouched on the control, where it also passes parameter these options, and now imagine if the usual variable was used instead of the object - there would be entropy.

  • Thanks for the answer, sorry for oftop, but why is there an exclamation mark this.form.get ('name')! .SetValue (null); ? - Vasya Milovidov
  • not-null assertion, return value of get method - AbstractControl | null AbstractControl | null - overthesanity
  • @VasyaMilovidov, ru.stackoverflow.com/questions/865585/… - overthesanity
  • This parameter can be compared with DataTransferObject if I correctly understood? - Vasya Milovidov
  • Sorry, I don’t know what DataTransferObject is in this context, maybe it’s true, but I never met DTO to be used somewhere in the angular - overthesanity dock