2015-01-08 5 views
4

저는 모든 양식 관리에 Angular JS를 사용합니다. 입력에 대한 데이터는 관련 ngModel에 저장되며 controller$scope에서 처리 할 수 ​​있습니다.각도를 사용할 때 양식 요소에 이름 속성이 필요합니까?

그래서 나는이 같은 형태의 설정이이 모든 주요 브라우저에서 절대적으로 잘 작동

<form name="addJob" novalidate data-ng-submit="addJob.$valid && addJob(job)"> 
    <input type="text" placeholder="Job Title" data-ng-model="job.title" required /> 
    <textarea placeholder="Brief" data-ng-model="job.brief"></textarea> 
    <button type="submit" data-ng-disabled="addJob.$invalid">Add Job</button> 
</form> 

(I는 IE 테스트하지 않았습니다 제외). 입력 또는 텍스트 영역에 이름 속성을 포함하지 않았다는 것을 알 수 있습니다. 나는 어떤 이유로 든 그들을 필요로합니까? 내가 전에 다음과 같은 읽었습니다 :

Note: Only form elements with a name attribute will have their values passed when submitting a form. 

을하지만이 ngModel에 바인딩 있기 때문에 내 데이터가 절대적으로 잘 전달됩니다. 올바른 방법인가 - 이름 속성을 포함 시키거나 포함하지 않습니까?

답변

5

ng-model과 함께 요소에 name 속성이 있어야 인스턴스가 formController에 추가되고 컨트롤이나 폼에서 유효성 검사가 수행됩니다. 또한 양식 (양식에 대한 조치)을 제출하는 경우 name 속성을 가진 양식 요소 만 서버에 제출됩니다. native form validation and submission process을 참조하십시오.

ngModelController 인스턴스에는 $name이라는 속성이 있으며 이는 요소의 이름뿐입니다. (있는 경우)

ngModelController source

this.$name = $attr.name; 

그리고 NG 모델 지시자는 경우 폼 컨트롤러 인스턴스에서 name와 키의 값으로 인스턴스를 추가하는 예 폼 컨트롤러 부모에 $addControl 메소드를 호출 이름이 없으면 관련이 없으며 각도 검증이 이루어지지 않습니다. 당신이 각 폼 컨트롤러 검증에 의존하지 또는 작업과 양식을 제출하지 않을 경우

form.$addControl = function(control) { 
    // Breaking change - before, inputs whose name was "hasOwnProperty" were quietly ignored 
    // and not added to the scope. Now we throw an error. 
    assertNotHasOwnProperty(control.$name, 'input'); 
    controls.push(control); 

    if (control.$name) { 
     form[control.$name] = control; 
    } 

FormController Source

그래서 귀하의 경우에 당신은 name을 가질 필요가 없습니다.

+0

화려한, 내게 그걸 정리해 주셔서 감사합니다 – Coop

+0

당신은 .. 오신 것을 환영합니다 .. :) – PSL

4

ng-model은 이미 데이터를 컨트롤러에 바인딩하기 때문에 설명 된 기능에는 이름 속성이 필요하지 않습니다. 그러나 양식에 대한 유효성 검사를 포함하려면 ui에서 요소를 서로 연결하는 데 name 속성이 필요합니다. 다음은 입력에 대한 angularjs API 문서 링크입니다 : https://docs.angularjs.org/api/ng/directive/input. 아래쪽에서 내가 말하는 유효성 검사를 볼 수 있습니다.

질문에 간단히 대답하려면 다음을 수행하십시오. 아니요, 이름 속성은 필요하지 않습니다. Angular의 입력에 필요한 유일한 속성은 데이터를 컨트롤러에 연결하기위한 ng-Model입니다.

+0

아 맞아요. 유효성 검사를 잊어 버렸습니다. 귀하의 답변을 주셔서 감사합니다 – Coop