【前言】：

在最近的项目中，对angular的学习也才算是开始入门。对于angular小白的我来说，每次遇到问题都是很好的成长机会，哪怕很小，(#^.^#)。不断的在错误中成长吧。

【错误】：

ERROR Error: If ngModel is used within a form tag,either the name attribute must be set or the form
      control must be defined as 'standalone' in ngModelOptions.

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

【分析】：

要能有很好的耐心看错误提示很重要，每一个错误的解决方案也往往就在错误提示中隐藏甚至是“暴露”着。O(∩_∩)O哈哈~

上面的异常信息告诉我们如果再表单标签中使用ngModel，则必须设置name属性，或者在ngModelOptions中必须将表单控件定义为“standalone”。
因为ngForm持有通过ngModel指令和name属性为各个元素创建的那些控件，并且监视他们的属性变化，包括有效性。它还有自己的valid属性，只当其中的所有控件都有效时，它才有效。

【理论】：

angular2的表单主要用到了ngForm，ngModel，ngSubmit。ngSubmit对应的函数是我们提交表单调用的函数。angular2通过ngForm将按钮的禁用/启用状态和表单的有效性关联起。
#loginForm、#username和#userpwd都是angular2中的模板引用变量；
#username和#userpwd可以监控input输入框的状态，#loginForm可以用来监控表单的状态，通过这些状态可以进行输入错误提示以及表单提交控制。
HTML控件（比如input、select等）的状态主要包括：
pristine和dirty：控件是否使用过，或者理解成是否输入过内容
invalid和valid：控件输入是否有效
touched和untouched：控件是否已经被访问过。

【实战】：

<div>
<form role="form"#validationForm1="ngForm">
<div>
<div>
<label>姓名：</label>
<label>
<input type="text" id="familyMemName"[(ngModel)]="homeInfo.familyMemName" name="familyMemName" ngModel
#familyMemName="ngModel" required>
</label>
</div>
<div>
<label>关系：</label>
<label>
<select[(ngModel)]="homeInfo.relationshipId" name="relationshipId" required>
<option *ngFor="let option of relationoptions" [value]="option.id">{{option.dictName}}</option>
</select>
</label> 
</div>
</div>
    ……
</div>
</form>
</div>

<div>
<!-- [disabled]="!addform.form.valid" -->
<button type="button"[disabled]="!validationForm1.form.valid" (click)="add(addModal)">
添加
</button>
<button type="button"(click)="close(addModal)">
取消
</button>
</div>

【总结】：

validationForm1.form.valid用来判断form表单中的控件是否全部有效。在ng2表单中使用ngModel必须带name属性或者使用[ngModelOptions]=”{standalone: true}”。否则会报上面的错误。

 1 //MARK: 扩展UIApplication
 2 extension UIApplication {
 3     var statusBarUIView: UIView? {
 4         
 5         if #available(iOS 13.0, *) {
 6             let tag = 3848245
 7             
 8             let keyWindow = UIApplication.shared.connectedScenes
 9                 .map({$0 as? UIWindowScene})
10                 .compactMap({$0})
11                 .first?.windows.first
12             
13             if let statusBar = keyWindow?.viewWithTag(tag) {
14                 return statusBar
15             } else {
16                 let height = keyWindow?.windowScene?.statusBarManager?.statusBarFrame ?? .zero
17                 let statusBarView = UIView(frame: height)
18                 statusBarView.tag = tag
19                 statusBarView.layer.zPosition = 999999
20                 
21                 keyWindow?.addSubview(statusBarView)
22                 return statusBarView
23             }
24             
25         } else {
26             
27             if responds(to: Selector(("statusBar"))) {
28                 return value(forKey: "statusBar") as? UIView
29             }
30         }
31         return nil
32 }

@Valid Student student,BindingResult bindingResult

问题分析：   重复依赖所导致的。

解决问题步骤： 

1.  查看 android > app > build.gradle 下有没有这样一行代码 ，没有的话添加试一下。
     

      multiDexEnabled true

2.查看 android > app > build.gradle 中  dependencies 下是否有重复依赖，有则删除，项目即可运行成功。

（如果不清楚哪个依赖是重复的，可以试一下  在命令行 gradle installdebug –stacktrace把堆栈日志打出来，应该可以打印出来重复依赖是哪一个，这个我是在网上看的，未测试）

3. 如果还是不行 ，把 android > app > build.gradle 中  dependencies 的引入方式  compile 改为 implementation ，如图：

OK，试过这三步绝对能行了，是不是很开心？

 1   <form [formGroup]="form">
 2     <mat-form-field>
 3       <input matInput placeholder="IP(SNMP)" [formControl]="snmpIpCtrl" required>
 4       <mat-error *ngIf="snmpIpCtrl.hasError(''required'')">IP(SNMP)不能为空</mat-error>
 5       <mat-error *ngIf="snmpIpCtrl.hasError(''pattern'')">请输入有效的IP地址</mat-error>
 6     </mat-form-field>
 7     
 8     <div>
 9       <p>是否支持Netconf</p>
10       <mat-radio-group [(ngModel)]="netconfFlag">
11         <mat-radio-button value="0" color="primary">支持</mat-radio-button>
12         <mat-radio-button value="1" color="primary">不支持</mat-radio-button>
13       </mat-radio-group>
14     </div>
15 </form>

1 <div>
2       <p>是否支持Netconf</p>
3       <mat-radio-group [(ngModel)]="netconfFlag" [formControl]="netconfFlagCtrl">
4         <mat-radio-button value="0" color="primary">支持</mat-radio-button>
5         <mat-radio-button value="1" color="primary">不支持</mat-radio-button>
6       </mat-radio-group>
7 </div>

1     <div>
2       <p>是否支持Netconf</p>
3       <mat-radio-group [(ngModel)]="netconfFlag" [ngModelOptions]="{standalone: true}">
4         <mat-radio-button value="0" color="primary">支持</mat-radio-button>
5         <mat-radio-button value="1" color="primary">不支持</mat-radio-button>
6       </mat-radio-group>
7     </div>