enter image description here

Recibí este error: Parece que estás usando ngModel en el mismo campo de formulario que formControlName. Soporte para usar la propiedad de entrada ngModel y el evento ngModelChange con Las directivas de forma reactiva han quedado obsoletas en Angular v6 y se eliminarán en Angular v7.

Traté de rectificar esto eliminando "[(ngModel)] =" value "" pero esto no funcionó - cuando se selecciona un elemento del menú desplegable, el valor no se retiene.

dropdown.component.html

<form [formGroup]="myForm" class="form-style">
    <input
      #agInput
      id="input-dropdown"
      [list-formatter]="autocompleListFormatter"
      ngui-auto-complete
      type="text"
      class="form-control"
      formControlName="gridDropdown"
      [source]="dropdownData"
      value-property-name="id"
      display-property-name="name"
      placeholder=" Search"
      [(ngModel)]="value"
      autocomplete="off"
    />
</form>

dropdown.component.ts

export class DropdownComponent implements OnInit, AgEditorComponent {
  @Input() name: String;
  @ViewChild('agInput', { static: true }) public elm: ElementRef;

  public dropdownData = ColumnData[0].cellEditorParams.values;
  public myForm: FormGroup;
  public value: String;
  public oldValue: String;
  public selected: Boolean;
  public params: ICellEditorParams;

  constructor(private builder: FormBuilder, private _sanitizer: DomSanitizer) {}

  isPopup(): boolean {
    return false;
  }
  refresh(params: ICellEditorParams) {
    params;
    this.params.api.refreshCells();
    return true;
  }

  getValue(): String {
    if (this.value === '') {
      this.value = this.oldValue;
    }
    console.log('getValue', this.value);
    return this.value;
  }

  agInit(params: ICellEditorParams) {
    this.value = params.value;
    this.oldValue = this.value;
    this.value = '';
    return this.value;
  }

  ngOnInit() {
    this.myForm = this.builder.group({
      gridDropdown: ''
    });
  }

  // dropdown
  autocompleListFormatter = (data: any) => {
    let html = `<span>${data.name}</span>`;
    return this._sanitizer.bypassSecurityTrustHtml(html);
  };

  setFocus() {
    this.elm.nativeElement.focus();
  }

  ngAfterViewInit() {
    Promise.resolve().then(() => this.setFocus());
  }
}

STACKBLITZ

1
Ana_30 23 sep. 2019 a las 15:21

1 respuesta

La mejor respuesta

No soy un gran fanático del uso de formulario reactivo con formulario de plantilla, por lo que si desea una referencia al valor de formControl, puede usar el objeto de formulario this.form.get('control Name').value, pero esto se puede simplificar creando la propiedad getter y setter, verifique el ejemplo

  constructor(fb:FormBuilder) { 
    this.form = fb.group({ //  👈 setup the form 
      userName:''
    })
  }

  set value (val) { 
    this.form.get('userName').setValue(val);
  }
  get value () {
    return this.form.get('userName').value
  }

  updateUserName(){
    this.value = 'updated!!!! 🍉🍉'
  }

Ahora puede utilizar la propiedad de valor para obtener el valor o actualizar el valor de control de formulario asignando un nuevo valor a la propiedad.

demo 🚀🚀

1
malbarmavi 26 sep. 2019 a las 12:41