Переключить поле в Angular Реактивная форма (проверка формы) на основе флажка в другом компоненте - PullRequest
Новая
       12

Переключить поле в Angular Реактивная форма (проверка формы) на основе флажка в другом компоненте

0 голосов
/ 19 марта 2020

У меня сложная форма, поля которой основаны на переключении флажков в другом компоненте (родительском). Мне нужно проверить форму, что означает, что некоторые поля могут быть отключены, а некоторые нет. Мне нужно, чтобы это было Dynami c и изменения, основанные на пометке / снятии галочки с флажков, а не на том, чтобы он работал только для инициализации. Я пробовал несколько примеров без удачи ..

parent.component. html

<input type="checkbox" id="check" ng-model="checked" (click)='toggleCheckform()'>
<label for="check">Check me</label>

<mat-tab label="child">
   <child [isCheck]="toggleCheck" (messageToEmit)="getMessage($event)"></child>
</mat-tab>

parent.component.ts 

export class ParentComponent {

    constructor() { }

    toggleCheck: boolean = false;

    ngOnInit() {
    }

    toggleCheckform() {
        this.toggleCheck = !this.toggleCheck;
    }
}

child.component. ts 

export class ChildComponent {

  @Input() isCheck: boolean;

  testForm = this.fb.group({
    Field1: ['', Validators.required],
    Field2: ['', Validators.required]
  });

  get Field1() { return this.testForm.get('Field1'); }
  get Field2() { return this.testForm.get('Field2'); }

  if(isCheck){
    this.testForm.get('Field1').disable();
  }

  onSubmit() {
    // TODO: Use EventEmitter with form value
    console.warn(this.testForm.value);
  }

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
  }

child.component. html

    <form [formGroup]="testForm" (ngSubmit)="onSubmit()">

    <div *ngIf="isCheck">
        <div class="form-group">
           <label for="Field1">Field1</label>
                <input type="text" class="form-control" id="Field1" formControlName="Field1">
        </div>
    </div>

    <div class="form-group">
       <label for="Field2">Field2</label>
           <input type="text" class="form-control" id="Field2" formControlName="Field2">
    </div>

    </form>

Поэтому, основываясь на флажке родительского компонента, я хочу иметь возможность включать / отключать это поле формы для проверки. Перепробовал много подходов, пример работает, когда форма инициализируется, но после этого нет. Пожалуйста, помогите.

1 Ответ

1 голос
/ 19 марта 2020

вам нужно использовать «setter» во входных данных 

_isCheck:boolean
@Input() 
set isCheck(value)
{
  this._isCheck=true;
  const control=this.testForm.get('Field1')
  if(control)
  {
    if (value)
      control.enable();
    else
      control.disable();
   }
}

get isCheck()
{
    return this._isCheck
}

ПРИМЕЧАНИЕ: когда вы отключили FormControl, form.value НЕ включает значение (вам нужно использовать form.getRawValue () ) Более того, форма действительна независимо от того, какое значение отключенного formControl было

A stackblitz

...