Angular 2 ng-требуется

Я создал управляемую моделью форму в angular 2, и одно из полей ввода должно отображаться только в том случае, если флажок выше не отмечен. Я сделал это с помощью * ngIf. Мой вопрос: как я могу установить, что ввод требуется только в том случае, если флажок не установлен? В angular 1.x я мог бы сделать это с помощью ng-required="condition" в представлении.

Вот html:

//флажок

<div class="checkbox col-sm-9">
   <label>
     <input type="checkbox"  id="getCompanyAddress" style="cursor: pointer;" [formControl]="form.controls['address']" >Use the company address 
  </label>
</div>

// ввод опции:

<div *ngIf="form.value.address == false" class="form-group" [ngClass] = "{'has-error':!form.controls['address'].valid && form.controls['address'].touched}" >
 <label for="add_gestion_adress" class="col-sm-3 control-label">Address
 </label>
  <div class="col-sm-9"><textarea rows="1" id="add_gestion_adress" class="form-control" name="add_gestion_adress" [formControl]="form.controls['address']" ></textarea>
  </div>
</div>

//и код модели:

   form: FormGroup;
    constructor(fb:FormBuilder){
      this.form = fb.group({
        'name': [null,Validators.compose([Validators.required, Validators.minLength(1)])],
        'type': ["en gros",Validators.compose([Validators.required, Validators.minLength(2)])],
        'person':[null,Validators.compose([Validators.required, Validators.minLength(1)])],
        'address':[false,Validators.compose([Validators.minLength(1)])],
        'locality':[null, Validators.compose([Validators.required])],
        'county':[null,Validators.compose([Validators.required])],
        'country':[null,Validators.compose([Validators.required])]
      })

    }

typescript angular validation angularjs model-driven
person valiNidelciu    schedule 10.10.2016    source источник
comment
Возможный дубликат условной обязательной директивы валидатора в Angular 2   -  person pajics    schedule 20.11.2016

Ответы (3)


arrow_upward
27
arrow_downward 

<textarea [required]="your angular expression">

Вышеупомянутое работает в последней версии Angular 4.

person Miller    schedule 08.06.2017

arrow_upward
2
arrow_downward

Один из способов сделать это — прослушивать изменения значений в элементе управления формы флажка и соответственно добавлять/удалять валидаторы в другом элементе управления.

Пример:

this.form.get('checkbox-control').valueChanges.map(
      value => {

          if(value) {
              this.form.get('other-control').setValidators(Validators.required);
          }else {
              this.form.get('other-control').clearValidators();
          }

      }
    );
person qdivision    schedule 01.11.2016

arrow_upward
0
arrow_downward

FormBuilder принимает второй аргумент, который принимает валидатор, предназначенный для проверки между полями:

this.form = fb.group({
        'name': [null,Validators.compose([Validators.required, Validators.minLength(1)])],
        'type': ["en gros",Validators.compose([Validators.required, Validators.minLength(2)])],
        'person':[null,Validators.compose([Validators.required, Validators.minLength(1)])],
        'address':[false,Validators.compose([Validators.minLength(1)])],
        'locality':[null, Validators.compose([Validators.required])],
        'county':[null,Validators.compose([Validators.required])],
        'country':[null,Validators.compose([Validators.required])]
      }
    , { validator: this.crossFieldValidation });

Вы можете определить, что он делает что угодно.

crossFieldValidation(ctrl: FormGroup): ValidationErrors|null {
    let isRequired = ctrl.controls.myCheckbox.value === true;
    let hasValue = ctrl.controls.myMaybeRequiredControlXX.value;
    if (isRequired && !hasValue) return {XXrequired: true};
    return null;
}

Чтобы проверить наличие ошибки для display/ngClass, используйте form.errors?.XXrequired или любой другой ключ, возвращенный вашим crossFieldValidation(), вместо form.controls.XX.errors?.required.

person Ron Newcomb    schedule 12.06.2017