Angular: иждивенцы валидаторов

Question

Я начинаю как Angular dev. Я пытаюсь создать простую форму, в которой некоторые поля ввода зависят от других. Вот мой шаблон:

<code><form [formGroup]="betingForkForm" novalidate>

<fieldset formGroupName="requredField">
    <div class="form-group" [ngClass]="{
                'correct':startingValue.valid  && (startingValue.touched || startingValue.dirty),
                'incorrect':startingValue.invalid  && (startingValue.touched || startingValue.dirty)}">
        <label>Starting value in units</label>
        <input type="number" class="form-control" formControlName="startingValue">
        <div class="form-control-feedback"
        *ngIf="startingValue.invalid && (startingValue.touched || startingValue.dirty)">
            <p>Starting value is required.</p>
        </div>
        <pre>Valid? {{ startingValue.valid }} 

Ожидаемое значение

Требуется ожидаемое значение.

Valid? {{ expectedValue.valid }} 

Минимальная вероятность на комбинацию

Valid? {{ minProbability.valid }} 

Минимальная прибыль на единицу для комбинации

Valid? {{ minProfit.valid }} 

Добавить вилку

Здесь код компонента ts:

    @Component({
  selector: 'app-create-betting-form',
  templateUrl: './create-betting-form.component.html',
  styleUrls: ['./create-betting-form.component.css']
})
export class CreateBettingFormComponent implements OnInit {

  betingForkForm: FormGroup;
  startingValue: FormControl;
  expectedValue: FormControl;
  minProbability: FormControl;
  minProfit: FormControl;


  constructor() { }

  ngOnInit(): void {
    this.createFormControls();
    this.createForm();
  }

  createFormControls() {
    this.startingValue = new FormControl('Starting value',
      [Validators.required, Validators.min(2) , Validators.max(100000)]);
    this.expectedValue = new FormControl('Expected value',
                        [Validators.required, Validators.min(this.startingValue.value), Validators.max(100000)]);
    this.minProbability =  new FormControl('Min probability');
    this.minProfit = new FormControl('Min profit');
  }

  createForm() {
    this.betingForkForm = new FormGroup({
      name: new FormGroup({
        startingValue: this.startingValue,
        expectedValue: this.expectedValue
      }),
      minProbability: this.minProbability,
      minProfit: this.minProfit
    });
  }
}

Вот мои вопросы:

1) Почему, когда я передаю большее число, чем 100000, у меня все еще есть действительные свойства (в шаблоне HTML), установленные как True в двух первых входах. 2) Когда я передаю наименьшее число второму входу, все еще действует. 3) Мой [ngClass] не принимает ожидаемый стиль в соответствии с первыми двумя наборами полей (в CSS все классы в порядке)

Answer 1

Я решаю свою проблему, создавая специальный метод, который отслеживает / подписывает события из HTML входов, как показано ниже:

  onSubscribe() {
this.startingValue.valueChanges.subscribe(changed => {
  if (changed) {
    this.betingForkForm.get('requiredField').get('expectedValue').setValidators(
      [Validators.required, Validators.min(this.startingValue.value), Validators.max(100000)]);
    this.betingForkForm.get('requiredField').get('expectedValue').updateValueAndValidity();
  }
});
this.expectedValue.valueChanges.subscribe(changed => {
  if (changed) {
    this.betingForkForm.updateValueAndValidity();
  }
});

Answer 2

Я думаю, что в вашем коде вы должны отключить кнопку, используя свойство disabled в шаблоне HTML. Для этого сначала вам нужно присвоить форме переменную и назначить ей директиву ngForm.

Итак, сначала вы даете форме переменную, скажем, «form». 1005 * Затем вы должны использовать эту переменную с кнопкой отправки, используя свойство disable.

<button type="submit" [disabled]="form.invalid" name>Add Fork</button>

Надеюсь, это поможет :)