textarea nzAutosize not working #2646

The main reason is follow:

nzAutosize must work with ngModel or ReactiveForm

In your stackblitz, you can see your console.

In the nz-autoresize.directive, you can see the next code.

ngAfterViewInit(): void {
    if (this.nzAutosize && this.platform.isBrowser) {
      if (this.ngControl) {
        this.ngZone.runOutsideAngular(() => {
          fromEvent(window, 'resize')
          .pipe(auditTime(16), takeUntil(this.destroy$))
          .subscribe(() => this.resizeToFitContent(true));
        });
        this.ngControl.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => this.resizeToFitContent());
      } else {
        console.warn('nzAutosize must work with ngModel or ReactiveForm');
      }
    }
  }

So you can add ngModel in your code. Like my stackblitz code

But one more interesting thing is that the height of the textarea is not suitable in my browser, chrome. I check the code of nz-autoresize.directive, it's mainly have some problem in the function of cacheTextareaLineHeight

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

@NearZXH ty for your answer =), it is working now, but i still have a question, when i changed minRows value to 1, the textarea height is not correct i think, in before version 7.0.rc0 show only 1 row, but now show 2 rows.

have this problem when 3 days ago i updated to version from 7.0.rc0 to 7.0.rc1

Yes, i check the diff between rc0 and rc1, ng-zorro rebuild the nzAutosize from an @input attr of nz-input.directive into a independent directive called nz-autoresize.directive, so i suggest you can use the rc0 as a temporary solution.

I made a 7.0.0-rc0 and 7.0.0-rc1 stackblitz code, so you can find the diff.

It seems in 7.0.0-rc1, ng-zorro tries to use the same way as cdk autosize.ts does to auto resize the textarea's height.

I try to use both methods to implement textarea auto resize here, but either cdkTextareaAutosize or nzAutosize can not get the right height of textarea. As @NearZXH said mainly because cacheTextareaLineHeight function get different lineHeight, because the cacheTextareaLineHeight is calculated at different time.

• In cdkTextareaAutosize, the first time cacheTextareaLineHeight calculated is during ngDoCheck. At that time no stylesheets was added to the textarea element, and we get 21px as the cacheTextareaLineHeight.
• In nzAutosize, the first time cacheTextareaLineHeight calculated is inside valueChanges callback function. At that time related stylesheets was added to the textarea element, and we get 32px as the cacheTextareaLineHeight.

It seems cdkTextareaAutosize get the right cacheTextareaLineHeight cause 32px is the actual height of the textarea.

But in cdkTextareaAutosize, it only use the cacheTextareaLineHeight * (min/max)Rows to calculate minHeight and maxHeight without considering top-bottom padding and border width makes the textarea narrower than it should be.

I think maybe there is some ng-zorro styles may have influence on the calculation of lineHeight.

Hi @tmirun @NearZXH after checking the cdk source code, I found we miss the host binding rows: 1 here https://github.com/angular/material2/blob/master/src/cdk/text-field/autosize.ts#L32, and the textarea.scrollHeight should minus 10px other than 4px we will fix it in next version. Thanks a lot!