Merge pull request #14073 from vmuresanu/issue-14062

fix: p-chips do not work with reactive forms

src/app/components/chips/chips.ts

@@ -84,7 +84,7 @@ export const CHIPS_VALUE_ACCESSOR: any = {
                         (paste)="onPaste($event)"
                         (focus)="onInputFocus($event)"
                         (blur)="onInputBlur($event)"
-                        [disabled]="disabled || maxedOut"
+                        [disabled]="disabled || isMaxedOut"
                         [ngStyle]="inputStyle"
                         [class]="inputStyleClass"
                     />
@@ -263,7 +263,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
         return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
     }
 
-    private get isValueMaxLimited(): boolean {
+    get isMaxedOut(): boolean {
         return this.max && this.value && this.max === this.value.length;
     }
 
@@ -459,7 +459,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
         this.value = this.value || [];
 
         if (item && item.trim().length) {
-            if ((this.allowDuplicate || this.value.indexOf(item) === -1) && !this.isValueMaxLimited) {
+            if ((this.allowDuplicate || this.value.indexOf(item) === -1) && !this.isMaxedOut) {
                 this.value = [...this.value, item];
                 this.onModelChange(this.value);
                 this.onAdd.emit({
@@ -500,7 +500,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
                 break;
 
             case 'Enter':
-                if (inputValue && inputValue.trim().length && !this.maxedOut()) {
+                if (inputValue && inputValue.trim().length && !this.isMaxedOut) {
                     this.addItem(event, inputValue, true);
                 }
 
@@ -530,7 +530,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
 
     updateMaxedOut(): void {
         if (this.inputViewChild && this.inputViewChild.nativeElement) {
-            if (this.isValueMaxLimited) {
+            if (this.isMaxedOut) {
                 // Calling `blur` is necessary because firefox does not call `onfocus` events
                 // for disabled inputs, unlike chromium browsers.
                 this.inputViewChild.nativeElement.blur();
@@ -544,10 +544,6 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
             }
         }
     }
-
-    maxedOut(): boolean {
-        return this.max && this.value && this.max === this.value.length;
-    }
 }
 
 @NgModule({

src/app/showcase/doc/chips/chipsdoc.module.ts

@@ -12,10 +12,11 @@ import { ReactiveFormsDoc } from './reactiveformsdoc';
 import { RegexpSeperatorDoc } from './regexpseperator.doc';
 import { StyleDoc } from './styledoc';
 import { TemplateDoc } from './templatedoc';
+import { MaxValuesDoc } from './maxvaluesdoc';
 
 @NgModule({
     imports: [CommonModule, ChipsModule, FormsModule, ReactiveFormsModule, AppCodeModule, AppDocModule],
     exports: [AppDocModule],
-    declarations: [ImportDoc, BasicDoc, CommaSeperatorDoc, RegexpSeperatorDoc, TemplateDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc]
+    declarations: [ImportDoc, BasicDoc, CommaSeperatorDoc, RegexpSeperatorDoc, TemplateDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, MaxValuesDoc]
 })
 export class ChipsDocModule {}

src/app/showcase/doc/chips/maxvaluesdoc.ts

@@ -0,0 +1,46 @@
+import { Component, Input } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'max-values-doc',
+    template: ` <section class="py-4">
+        <app-docsectiontext [title]="title" [id]="id">
+            <p>Chips can have a maximum number of entered items. To set this limit, the <i>max</i> property is used, which accepts a numeric value that represents the maximum number of items in the chip list</p>
+        </app-docsectiontext>
+        <div class="card p-fluid">
+            <p-chips [formControl]="values" [max]="2" placeholder="Maximum 2 items"></p-chips>
+        </div>
+        <app-code [code]="code" selector="chips-max-values-demo"></app-code>
+    </section>`
+})
+export class MaxValuesDoc {
+    @Input() id: string;
+
+    @Input() title: string;
+
+    values = new FormControl<string[] | null>(null);
+
+    code: Code = {
+        basic: `<p-chips [formControl]="values" [max]="max" placeholder="Maximum 2 items" ></p-chips>`,
+
+        html: `
+<div class="card p-fluid">
+    <p-chips [formControl]="values" [max]="max" placeholder="Maximum 2 items"></p-chips>  
+</div>`,
+
+        typescript: `
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+    selector: 'chips-max-values-demo',
+    templateUrl: './chips-max-values-demo.html',
+    styleUrls: ['./chips-max-values-demo.scss']
+})
+export class ChipsMaxValuesDemo {
+    values = new FormControl<string[] | null>(null);
+    max = 2;
+}`
+    };
+}

src/app/showcase/pages/chips/chipsdemo.ts

@@ -7,6 +7,7 @@ import { TemplateDoc } from '../../doc/chips/templatedoc';
 import { StyleDoc } from '../../doc/chips/styledoc';
 import { AccessibilityDoc } from '../../doc/chips/accessibilitydoc';
 import { ReactiveFormsDoc } from '../../doc/chips/reactiveformsdoc';
+import { MaxValuesDoc } from '../../doc/chips/maxvaluesdoc';
 
 @Component({
     templateUrl: './chipsdemo.html'
@@ -28,6 +29,11 @@ export class ChipsDemo {
             label: 'Reactive Forms',
             component: ReactiveFormsDoc
         },
+        {
+            id: 'max-values',
+            label: 'Max Values',
+            component: MaxValuesDoc
+        },
         {
             id: 'commaseperator',
             label: 'Comma Seperator',