Setting a textarea to null when its value is an empty string?

Question

I've a bunch of textareas being generated by a loop, and while I can set the initial values to null, if a user types text then deletes it, the value reverts back to an empty string.

My html:

<form #reviewForm="ngForm" (ngSubmit)="onReviewFormSubmit(reviewForm.value)">
...
  <textarea (input)="value = $event.target.value"
            [name]="comments" [ngModel]="defaultValue"
            id="{{'comments-'+i}}"
            placeholder="Comments"></textarea>
...
</form>

My component:

defaultValue: string = null;

The json object requires either a string value for the comments or else null. I set it to null initially with defaultValue, when a user types I get a string value, but once they empty out the textarea it reverts back to "".

How would I go about setting the empty string state to null?

Sam · Accepted Answer · 2020-02-21 15:08:41Z

1

You could try something like the following, calling a function on input event.

Though it might be easier to catch the values when you submit the form?

<textarea (input)="value = calculateValue($event.target.value)"  
          [name]="comments" [ngModel]="defaultValue"
          id="{{'comments-'+i}}"
          placeholder="Comments"></textarea>

calculateValue(e) {
    if(e == '') {
        return null
    } 
    return e
}

answered Feb 21, 2020 at 15:08

Sam

1,87111 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rebecca O'Riordan Over a year ago

This doesn't work unfortunately. I still get an empty string.

Rebecca O'Riordan Over a year ago

To clarify, it does set the value to null, but as it's part of a loop of textareas in a form the form submit doesn't know the value has been set. How would I assign this null value back to the textarea for my form to later catch and submit?

Ali Adravi · Accepted Answer · 2020-02-21 15:20:09Z

1

The value null represents the intentional absence of any object value.

[ngModel] don't differentiate between null and blank while posting.

See you bind the control with nulll and post, it returns blank ''

Same thing will happen when you bind with blank, because it return the string.

Another example, you bind with some text say 'example' but user delete that and post the page, what will you expect to get, obviously blank.

If you want to handle blank to null then you need to see this

answered Feb 21, 2020 at 15:20

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

Comments

Aleks Grunwald · Accepted Answer · 2020-09-15 10:32:40Z

1

I think, you can just reset a value to null right before sending a form. In your onReviewFormSubmit method, you could add an if, which checks if value is an empty string and if it is, set this specific value to null.

 if (value.name === '') {
     value.name = null;
 }

answered Sep 15, 2020 at 10:32

Aleks Grunwald

4051 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

Setting a textarea to null when its value is an empty string?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related