NgFormの@Directiveのselectorの記述が理解できない

Question

@Directive({
  selector: 'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]',
  bindings: [formDirectiveProvider],
  host: {
    '(submit)': 'onSubmit()',
  },
  outputs: ['ngSubmit'],
  exportAs: 'ngForm'
})

上記はNgFormの@Directiveの記述です。
上から二行目selector: 'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]'
が理解できません。これによって実現できていることは知っています。
しかし、文法が分かりません。
例えば:not([ngNoForm])は、どういう意味ですか。ngNoFormという属性を持たないことを宣言しているのでしょうか。
またform:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]という風にカンマで３つにわかれていますが、これは、区切ることによって何を意味する宣言なのですか。検討がつきません。

Angularを使っている方、入門的な事ですが教えてください。

Answer 1

最初の回答者さんが答えているように、その :not() はまさにCSSセレクタと同じものです。Angularが独自に定めた記法ではありません。

少し補足します。

'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]', では、

• form:not([ngNoForm]):not([ngFormModel]) または
• ngForm または
• [ngForm]

にマッチする要素にNgFormDirectiveを適用するようになります。

なぜnotを使っているかというとReactiveFormsとの区別、あるいはNgFormを使いたくないフォームのためです。ngNoForm属性をつけるとそのフォームはAngularのFormsModuleやReactiveFormsModuleの干渉を受けないネイティブのフォームとしてふるまうようになります。それはこのnotで除外されているからです。

ngFormModel属性はReactiveFormsModuleの管轄のディレクティブなので、同じform要素で衝突しないようにnotで除外されています。

tukatterさんの回答が正しいので、もし評価される場合はtukatterさんのほうにお願いします。

Comments

[tukatter]

補足説明ありがとう。
両方読むことをオススメします。
ネイティブのフォームとして振舞うという説明は大事なことですよね。
読み返してそっちの説明の方が要ると気づき参考になりました。

Answer 2

ｃｓｓのセレクターとして考えると分かりやすいかもしれません。

http://weboook.blog22.fc2.com/blog-entry-382.html
「E:not(s)」　は　「sでないセレクタを持つE要素」

form:not([ngNoForm]):not([ngFormModel])

<form ngNoForm > とか <form ngFormModel >の記述が入ってないform要素を対象

または　<ngForm>　を対象　または　<div ngForm="">　を対象

※カンマは　または　という　or条件の意味

[]で囲まれた属性　ngNoForm　ngFormModel　が記載されたフォームタグは対象にしたくなかった
セレクタなのかと読み解きます

動かしてみないと挙動はわかりませんがこれでイメージできましたか？
間違っていたらすみません。