AngularJS : 양식 입력 변경시 활성화 버튼

Question

긴 양식 페이지에 많은 설정이있는 앱이 있습니다. 현재 설정을 보거나 업데이트하려면 페이지로 이동해야합니다.

누군가가 실제로 현재 입력을 변경하는 경우에만 "업데이트"버튼을 사용할 수 있도록하고 싶습니다.

내 순진 접근법은 enableButton 플래그를

<form name='form' ng-submit="submit()"> 
    <input type="sometype" ng-model='something1' ng-change="formChanged=true"></input> 
    ... 
    <input ng-model='somethingN' ng-change="formChanged=true"></input> 
    <button ng-disabled="!formChanged" type="submit" /> 
</form> 

을 설정 모든 입력에 NG 변화의 속성을 추가하는 것입니다 그러나 이것은 지루하고 반복적 인 것 같다 (우리는 선택의 여지가), 및 기대했다 뭔가 간단한 ("$ .Changed"와 같은 형식 ...)

Answer 1

폼 입력의 플래그 변경을 설정하는 대신 양식 컨트롤러 개체에 $dirty 속성으로 작성된 각도를 사용해야합니다. 사용자가 양식의 요소와 상호 작용했는지 여부를 알려줍니다. 형태가 유효하지 않거나

자연 그대로의 경우

<form name='form' ng-submit="submit()"> 
    <input name="some1" type="sometype" ng-model='something1' ></input> 
    ... 
    <input name="some2" ng-model='somethingN' ></input> 
    <button ng-disabled="!form.$dirty" type="submit" /> 
</form> 

당신이뿐만 아니라 $valid 재산의 사용을 만들 수있는 양식의 검증이 유사 경우

<button ng-disabled="form.$pristine" type="submit" /> 

을 할 수 $pristine 플래그를 사용하여, 예를 들어 버튼을 비활성화

<button ng-disabled="form.$pristine|| form.$invalid" type="submit" />