각도 2 ng-required

각도 2에서 모형 중심 양식을 만들었고 입력란 중 하나는 위의 확인란이 선택되지 않은 경우에만 표시되어야합니다. * ngIf를 사용하여이 작업을 수행했습니다. 내 질문에 어떻게 확인란을 선택하지 않은 경우에만 해당 입력을 설정할 수 있습니까? Angular 1.x에서는보기에서 ng-required = "condition"을 사용하여이 작업을 수행 할 수 있습니다.각도 2 ng-required

// 체크 박스

<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])] 
     }) 

    }

출처

2016-10-10 valiNidelciu

[조건부 필수 유효성 검사기 지시문 2의 가능한 복제본] (http://stackoverflow.com/questions/36986375/conditional-required-validator-directive-in-angular-2) – pajics

여기

는 HTML입니다

할 수있는 한 가지 방법은 가치에 귀를 기울이는 것입니다. 체크 박스 폼 컨트롤의 변경 및 그에 따라 다른 컨트롤의 유효성 검사기를 추가/제거합니다.

예 :

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(); 
      } 

     } 
    );

출처

2016-11-01 18:05:56 qdivision

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

FormBuilder 크로스 필드 검증 대상으로 발리을 받아 2 개의 인자를 가지고 코너 4

출처

2017-06-08 15:49:49 Miller

잘 작동했습니다. –

최신 버전의 위 방법 :

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; 
}

는, 디스플레이/ngClass에 대한 오류를 확인 form.errors?.XXrequired를 사용하거나 crossFieldValidation() 키 무엇이든 대신 form.controls.XX.errors?.required의 반환합니다.

출처

2017-06-12 01:49:56

각도 2 ng-required

답변

관련 문제