2017-11-02 8 views
0

양식에 양식이있어 특정 필드가있는 사용자 정의 구성 요소가 있습니다. 폼 끝에 버튼이 있습니다. 이 버튼은 사용자 정의 구성 요소 나 변수의 바인딩이 subFormValid 사용자 정의 구성 요소의 검증이 유효한 경우에만 유효 "subFormValid"두 방법이 지금 ...disabled.bind Aurelia에서 올바르게 작동하지 않습니다.

disabled.bind="!(formValid && subFromValid)" 

있습니다. 따라서 하위 양식은 일부 필드의 유효성을 검사하고 subFormValid = true로 설정합니다. "formValid"가 false 인 경우에도 버튼이 활성화됩니다. 왜 그런지 모르겠다. 난 ... 내가 가진 내 수업 시간에 그런

<button type="submit" disabled.bind="wholeFormValid">Submit</button> 

...

get wholeFormValid() { 
    console.log("validating form"); 
    console.log(!(this.formValid && this.subFormValid)); 
    return !(formValid && subFormValid); 
} 

I를 변수에 get 함수를 추가하고과 같이, 거기에 콘솔 로그를 추가로까지 갔다 콘솔에 백만 개가 넘는 라인을 추가 할 수는 있지만, 전체 시간을 볼 수있었습니다. 내가 처음 형태를 확인하는이 로그인 된 페이지 ...

를로드 할 때 진정한

은 그럼 하위 폼을 작성하고 콘솔을 확인. 콘솔은

아직, 버튼이 현재 활성화 된

진정한 형태를 확인 중 ... 보여 주었다.

subFormValid = true 일 때마다 formValid에 관계없이 버튼이 활성화됩니다.

2 가지 조건이 충족되지 않으면 버튼을 비활성화하는 방법을 아는 사람이 있습니까? 내가하는 모든 작업은 콘솔이 여전히 "true"로깅 중이지만 버튼을 비활성화해야하는 경우에도 subFormValid가 true가 되 자마자 버튼을 활성화합니다.

Smarty Streets를 사용하여 주소의 유효성을 검사해야하고 다른 부분에서 양식의 해당 부분을 다시 사용할 수 있기를 원하기 때문에 양식에 하위 양식이있는 이유가 궁금하다면, 그래서 입력 유효성을 검사하고 주소의 유효성을 검사하는 주소 섹션에 대한 사용자 지정 구성 요소를 만들었습니다. 그것은 ...

<require from="components/smarty-streets"></require> 

은 다음과 같이 사용 ... 그래서 같은 형태로 호출되고

내가 가진 똑똑한 거리에서 그런
<smarty-streets form-is-validated.two-way="subFormValid"></smarty-streets> 

...

@bindable formIsValidated; 

및 구성 요소의 유효성 검증에 따라 값을 true에서 false로 또는 그 반대로 변경합니다.난 당신이 CONSOLE.LOG 라인 this.formValid를 사용하는 함수에서 발견

<input type="checkbox" checked.bind="formValid"/> 
<input type="checkbox" checked.bind="subFormValid"/> 
<button disabled.bind="wholeFormValid">Submit</button> 

하지만, 리턴 라인에 당신은 this없이, formValid을 사용 :

답변

1

나는 다음과 같은 사용하여 문제를 재현하기 위해 노력했다. 이것은 실제 바인딩 변수와 다른 변수 인 것 같습니다. 나는 당신의 기능은 다음과 같이해야한다고 생각 :

get wholeFormValid() { 
    console.log("validating form"); 
    console.log(!(this.formValid && this.subFormValid)); 
    return !(this.formValid && this.subFormValid); 
} 

편집 : 나는 또한 강력하게 GET에 @computedFrom 장식을 사용하는 것이 좋습니다은() 아우렐 리아가하는 계산의 양을 줄일 수 있습니다. 당신은 그 here에 대한 자세한 내용을 읽을 수 있습니다.